reactjs-toolbox radiobutton group不会改变

Question

在我的反应应用程序中,我使用此代码的单选按钮:

 <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右侧bevore渲染的控制台日志

Answer 1

看来您的状态设计对于该RadioGroup组件来说是不够的。

这是幕后的受控组件，因此所选的单选按钮始终由RadioGroup'svalue属性强加。我不知道你如何初始化组件（意味着默认选择），但它应该始终属于单个组件的value其中一个valueRadioButton，意味着this.state.stepsData[stepNumber].stepType应该是 1, 2 o 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 });
}

让我知道这是否适合您。