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

Question

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

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

我的代码是这样的..

<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 事件。

这是怎么回事？以及如何达到预期的效果??

Answer 1

检查这个组件

use a boolean state to set the checked property

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')
);

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

Why is change function not firing on radio input in react

javascript

onchange

event-handling

reactjs