React state 和单选按钮上的 initialState 的奇怪行为... [已解决原因是<validatedform> react-jhispter 以 defaultValues 失败]</validatedform>

Question

I have a strange behavior that I can't solve using State to change Radio button.

I open my page, 'Years' is selected. It is correct. We can also see the state property in the above text field (it contains 'years');

If I click on 'All', the state changes (contains 'all') BUT the RADIO button is not checked.

If I CLICK AGAIN on the same RADIO BUTTON 'All', it shows correctly:

It is like onCLick works (second time), but onCHange not. It is like after running my onCHange function, it resets to the initial state on the page (checking the 'years' radio).

I have not clue.

Here is some part of my code (the minimum to understand):

<label><input name='choix' type='radio' value='all' onChange={(e) => choixChanged(e)} checked={radioChoiceState === "all"} /> All</label>

<label><input name='choix' type='radio' value='dateRange' onChange={choixChanged} checked={radioChoiceState === "dateRange"} /> Date range</label>

<label><input name='choix' type='radio' value='years' onChange={choixChanged} checked={radioChoiceState === 'years'} /> Only years</label>

... truncated ...

const [datesRangeVisibleState, storeDatesRangeVisible] = useState(false);
const [radioChoiceState, storeRadioChoiceState] = useState('years');


const choixChanged = event => {
    const butt = event.target.value;
if (butt === 'all') {
  storeDatesRangeVisible(false);
} else if (butt === 'dateRange') {
  storeDatesRangeVisible(true);
} else {
  storeDatesRangeVisible(false);
}
storeRadioChoiceState(butt);
}

Please help me...

Answer 1

OKAY.. I finally FOUND the root cause.. which is the <ValidatedForm> from react-jhispter that surrounds all the 3 radio buttons.. It FAILS if I add the attribute: defaultValues=....