javascript - reactjs-toolbox 单选按钮组不改变

Question

在我的 React 应用程序中，我使用带有此代码的单选按钮:

 <RadioGroup name='steptype' className={css.ProcessStepRadioButtons} value={this.state.stepsData[stepNumber].stepType}
                                onChange={(value, event) => {
                                    this.changeInputOptionHandlerProcessStep(value, "stepType", stepNumber)
                                }}>
                        <RadioButton label={<T value='processes.new.processStepTypeDuty'/>} value={1} />
                        <RadioButton label={<T value='processes.new.processStepTypeVariable'/>} value={2}/>
                        <RadioButton label={<T value='processes.new.processStepTypeOptioanal'/>} value={3}/>
                    </RadioGroup>

和这个处理程序:

export function changeInputOptionHandlerProcessStep(value, field, step) {
this.setState((prevState) => ({
    stepsData: prevState.stepsData.map((currentStep, i) => {
        if (i === step) {
            return {
                ...currentStep,
                [field]: value
            }
        }
        return currentStep
    })
}), () => {
    console.log("New state in ASYNC callback:", this.state.stepsData);
} );
}

状态设置正确，但单选按钮没有视觉切换，

在这种情况下可能是什么问题？

谢谢

更新 this.state.stepsData 的控制台日志

在渲染之前更新 this.state.stepsData 的控制台日志

Answer 1

您的状态设计似乎不适合 RadioGroup组件。

这是一个 controlled component在幕后，所以选择的单选按钮始终由 RadioGroup 强加。的 value支柱。我不知道你是如何初始化组件的(意思是默认选择)，但是它的 value应始终属于 value 之一s单RadioButton组件，意思是this.state.stepsData[stepNumber].stepType应该是 1、2 或 3。

stepType对我来说(在这里做出假设)更像是一个字符串而不是一个数字，所以可能是初始化错误，组件会自动使用第一个单选按钮作为默认选择。

考虑到这一点，您控制这组单选按钮的子状态应该是一个数字(1、2 或 3)。然后，你的处理程序 changeInputOptionHandlerProcessStep将接收新选择(新数字)作为第一个参数，您只需使用新值设置状态即可。它会是这样的:

<RadioGroup 
    name='steptype' 
    className={css.ProcessStepRadioButtons} 
    value={this.state.stepNumber} // initialised to 1, 2 or 3
    onChange={(value, event) => {this.changeInputOptionHandlerProcessStep(value, "stepType", stepNumber)}}
>
    <RadioButton label={<T value='processes.new.processStepTypeDuty'/>} value={1} />
    <RadioButton label={<T value='processes.new.processStepTypeVariable'/>} value={2}/>
    <RadioButton label={<T value='processes.new.processStepTypeOptioanal'/>} value={3}/>
</RadioGroup>

function changeInputOptionHandlerProcessStep(newValue) {
     this.setState({ stepNumber: newValue });
}

让我知道这是否适合您。