6

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

 <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 的控制台日志在此处输入图像描述

4

1 回答 1

2

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

这是幕后的受控组件，因此选择的单选按钮始终由RadioGroup's valueprop 强加。我不知道您是如何初始化组件的（即默认选择），但它value应该始终属于value单个RadioButton组件的其中一个，这意味着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 });
}

让我知道这是否适合你。

于 2017-06-12T23:03:44.077 回答