javascript - Why is change function not firing on radio input in react

Question

Okay, so in my code, I have these two radio inputs, one with a fixed value, one with an input-field to take the dynamic value.

Now what I wanted to do is, when the user enters value in the input field, the corresponding radio button will get selected automatically, and the values will get updated as well. and if the user selects the default value, the state will get updated with the default value.

My code looks like this..

<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>

The functions are defined as

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

Now the issue is, when I type into my input field, the updateState function is fired, the radio gets checked, but if I click on the radio buttons afterwards, they aren't firing the onchange events associated.

What's wrong here ? And how to achieve the desired result ??

question from:https://stackoverflow.com/questions/65882773/why-is-change-function-not-firing-on-radio-input-in-react

Answer 1

Check this component

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