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组件。

这是幕后的controlled component，因此所选的单选按钮始终由RadioGroup的{{1}}道具施加。我不知道你是如何初始化组件（意味着默认选择），但它的value应该始终属于单个value组件的value之一< / strong>，意味着RadioButton应为1,2 o 3。

this.state.stepsData[stepNumber].stepType听起来对我（在这里做出假设）就像一个字符串而不是一个数字，所以它可能是初始化错误，组件会自动转到第一个单选按钮作为默认选择。

考虑到这一点，用于控制这组单选按钮的子状态应该是一个数字（1,2或3）。然后，您的处理程序stepType将接收新选择（新数字）作为第一个参数，您可以使用新值设置状态。它会是这样的：

changeInputOptionHandlerProcessStep

请告诉我这是否适合您。

reactjs-toolbox radiobutton group不会改变

1 个答案: