为什么在反应中更改功能不会在无线电输入上触发

如何解决为什么在反应中更改功能不会在无线电输入上触发

好的，所以在我的代码中，我有这两个无线电输入，一个具有固定值，一个具有用于获取动态值的输入字段。

现在我想要做的是，当用户在输入字段中输入值时，相应的单选按钮将被自动选中，并且值也会更新。如果用户选择默认值，状态将更新为默认值。

我的代码看起来像这样..

<ul className='list-unstyled mb-0 d-flex flex-column flex-lg-row justify-content-around'>
                <li className='mr-4'> 
                    <input 
                        defaultChecked
                        onChange={() => updateState('timeLimit',defaultTime)}
                        type="radio" 
                        value={defaultTime}
                        name='time' 
                        className='mr-2' 
                        id="defaultTime"/>
                    <label htmlFor="defaultTime"> {defaultTime} Mins. (default)</label> 
                </li>
                <li> 
                    <input 
                        onChange={(e) => updateState('timeLimit',e.target.value)}
                        type="radio" 
                        name='time' 
                        value={customTime}
                        ref={customTimeRef}
                        className='mr-2' 
                        id="customTime"/> 
                    <label htmlFor="customTime">
                        <input 
                            onChange={(e) => updateCustomTime(e.target.value)}
                            style={{outline:'none',border:'none',width:'9rem'}} 
                            placeholder='Enter Your Time'
                            min='0' 
                            className='border-bottom border-info pl-2 pb-1' 
                            type="number"/> Mins. (custom) 
                    </label>
                </li>
            </ul>

函数定义为

const updateCustomTime = (val) => {
    if(customTimeRef.current.checked){
        setCustomTime(val)
        updateState('timeLiimit',val)
    }
    else{
        customTimeRef.current.checked=true
        setCustomTime(val)
        updateState('timeLiimit',val)
    }
}

现在的问题是，当我在输入字段中输入时，updateState 函数被触发，收音机被检查，但如果我之后单击单选按钮，它们不会触发相关的 onchange 事件。

这里有什么问题？以及如何达到预期的效果？？

解决方法

检查这个组件

使用布尔状态来设置 checked 属性

const App = () => {
  const [useDefault,setUseDefault] = React.useState(true)
  
  return (
    <div>
      <div>
        <input type="radio" name="time" checked={useDefault} onClick={() => setUseDefault(true)} />
      </div>
      <div>
        <input type="radio" name="time" checked={!useDefault} />
        <input type="text" onKeyUp={() => setUseDefault(false)} />
      </div>
    </div>
  )
}


ReactDOM.render(
  <App />,document.getElementById('root')
);