React表格行内单选按钮初始状态设置问题求助

要正确设置单选按钮的初始状态，需要把后端返回的初始值同步到组件的state中，同时在渲染时优先使用state中修改后的值（如果有的话），否则使用初始的props值。具体步骤如下：

1. 初始化state，同步后端初始值 #

在组件的constructor里，遍历传入的approveData，根据每条数据的signedOff字段，构建changedValues的初始状态：

constructor(props) {
    super(props);

    // 从props中初始化changedValues
    const initialChangedValues = {};
    props.approveData.forEach(item => {
        // 根据signedOff字段设置初始值：approve+ID 或 reject+ID
        initialChangedValues[item.signoffId] = item.signedOff 
            ? `approve${item.signoffId}` 
            : `reject${item.signoffId}`;
    });

    this.state = {
        changedValues: initialChangedValues
    };
}

2. 渲染单选按钮时，动态判断checked状态 #

在渲染每个单选按钮时，不再直接用props的值，而是先看state.changedValues中是否有当前行的修改值，没有的话再用初始的props值：

{this.props.approveData.map((approveData) =>
    <tr key={approveData.signoffId}> {/* 列表渲染必须添加唯一key属性 */}
        <td>{approveData.signoffId}</td>
        <td>
            <div className="radio"> {/* React中需用className替代class */}
                <input 
                    type="radio" 
                    value={`approve${approveData.signoffId}`} 
                    name={`radio${approveData.signoffId}`} 
                    onChange={this.onChange.bind(this, approveData.signoffId)}
                    checked={
                        this.state.changedValues[approveData.signoffId] === `approve${approveData.signoffId}`
                    }
                />
            </div>
        </td>
        <td>
            <div className="radio">
                <input 
                    type="radio" 
                    value={`reject${approveData.signoffId}`} 
                    name={`radio${approveData.signoffId}`} 
                    onChange={this.onChange.bind(this, approveData.signoffId)}
                    checked={
                        this.state.changedValues[approveData.signoffId] === `reject${approveData.signoffId}`
                    }
                />
            </div>
        </td>
    </tr>
)}

额外注意点 #

• 列表渲染时必须给每个tr添加唯一key属性，这里用signoffId即可，符合React性能优化要求。
• React中DOM元素的类名需使用className，避免与JavaScript关键字class冲突。

修改后，组件初始化时会自动根据后端返回的signedOff状态选中对应单选按钮，用户修改后的状态也会同步到state中，原有保存功能不受影响。

内容的提问来源于stack exchange，提问作者Bob