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 应该总是属于单个 RadioButton 的 value 之一components，意思是 this.state.stepsData[stepNumber].stepType 应该是 1, 2 o 3.

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

考虑到这一点，用于控制这组单选按钮的 substate 应该是一个数字（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 });
}

让我知道这是否适合你。

reactjs-toolbox 单选按钮组不改变

reactjs-toolbox radiobutton group does not change

javascript

reactjs

react-toolbox