Question

我有：

const Input = ({
    onChange,
    inputVal,
    currentVal,
    id,
}) => {
    const handleOnChange = e => {
        onChange(e);
    }

    return (
        <input 
            onChange={handleOnChange} 
            value={inputVal} 
            id={id} 
            type="radio" 
            checked={inputVal === currentVal} 
        />
    );
};

我这样使用：

const RampUp = ({            
    age, 
    columns, 
    ongoingMonthlyPayment,
    setYearlyContr,
    yearlyContr
}) => {

const [radioVal, setRadioVal] = useState("5");

const handleYearsSelection = val => { 
    setYearlyContr(parseInt(val));
    setRadioVal(val);
}
...
<Control flexGrow="2">
    <span>yearly</span>
    <span>monthly</span>
</Control>
<Control justifyContent="space-evenly" flexGrow="3">
    <div>
        <label htmlfor="a">5</label>
        <Input onChange={handleYearsSelection} inputVal="5" id="a" currentVal={radioVal} />
    </div>
    <div>
        <label htmlfor="b">10</label>
        <Input onChange={handleYearsSelection} inputVal="10" id="b" currentVal={radioVal} />
    </div>
    <div>
        <label htmlfor="c">15</label>
        <Input onChange={handleYearsSelection} inputVal="15" id="c" currentVal={radioVal} />
    </div>
    <div>
        <label htmlfor="d">Max</label>
        <Input onChange={handleYearsSelection} inputVal={maxYears} id="d" currentVal={radioVal} />
    </div>
</Control>

...

由于某些原因，第一次渲染时，我需要单击两次以更新道具

currentVal

即使我单击：

<Input onChange={handleYearsSelection} inputVal="10" id="b" currentVal={radioVal} />

第一次，“ currentVal”的值仍为5（默认值）。在这种情况下，需要第二次点击才能给我10。

Answer 1

我不得不将以下一个部分向上移动：

const [radioVal, setRadioVal] = useState("5");

React radio需要单击两次才能触发

1 个答案: