反应初始 state：表格的每一行中有 2 个单选按钮

Question

我有一个表，每行有 2 个单选按钮，用于批准或拒绝该行。 onChange 事件保存每行的 ID 以及是否被批准或拒绝。 然后有一个按钮可以将其保存在后端。

这一切都很好。

    import React from 'react';
    import { Button } from 'reactstrap';

    class ApproveDataList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            changedValues : {}
        };
    }

    onChange = (selectedIndex, e) => {
        var changedValues = Object.assign({}, this.state.changedValues);
        changedValues[selectedIndex] = e.target.value;
        this.setState({ changedValues });
    }

    save(e) {
        //save this.state.changedValues
    }

    render() {
        return (
            <div>
                <table>
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Approve</th>
                        <th>Reject</th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.approveData.map((approveData) =>
                    <tr >
                        <td>{approveData.signoffId}</td>
                        <td>
                            <div class="radio">
                                <input 
                                type="radio" 
                                value={"approve" + approveData.signoffId} 
                                name={"radio" + approveData.signoffId} 
                                onChange={this.onChange.bind(this, approveData.signoffId)} />
                            </div>
                        </td>
                        <td>
                            <div class="radio">
                                <input 
                                type="radio" 
                                value={"reject" + approveData.signoffId} 
                                name={"radio" + approveData.signoffId} 
                                onChange={this.onChange.bind(this, approveData.signoffId)} />
                            </div>
                        </td>
                    </tr>
                )}
                </tbody>
            </table>
            <Button  onClick={this.save.bind(this)} >Save</Button>
            </div>
        );
    }
}

export default ApproveDataList

当我从后端加载此组件时，我现在对如何设置单选按钮的初始 state 感到困惑。

我的直觉是做

... value={"approve" + approveData.signoffId}  checked={approveData.signedOff}

和

... value={"reject" + approveData.signoffId} checked={!approveData.signedOff}

但这当然行不通。 我想我需要将初始值存储在 State 中并使用它，但不确定如何执行此操作，因为我是 React 新手，并且还没有在线找到特定的解决方案。

请帮忙！

Answer 1

我试图用我自己的小代码来复制你的问题。

const dataArray = new Array(15).fill(null).map((_, index) => ({
  signoffId: index,
  signedOff: Math.random() < 0.5,
}));

export default function App() {
  return dataArray.map((obj) => (
    <div>
      <label style={{ margin: '1rem' }}>
        <input
          type="radio"
          value={'approve' + obj.signoffId}
          name={'radio' + obj.signoffId}
          defaultChecked={obj.signedOff}
          onChange={onChange.bind(this, obj.signoffId)}
        />
        Approve {obj.signoffId}
      </label>
      <label style={{ margin: '1rem' }}>
        <input
          type="radio"
          value={'reject' + obj.signoffId}
          name={'radio' + obj.signoffId}
          defaultChecked={!obj.signedOff}
          onChange={onChange.bind(this, obj.signoffId)}
        />
        Reject {obj.signoffId}
      </label>
    </div>
  ));

  function onChange(selectedIndex: number, e: React.BaseSyntheticEvent) {
    console.log(selectedIndex, e.target.value);
  }
}

我使用了功能性 React 组件，但工作原理应该相同。

您需要在单选按钮上为初始 state 设置defaultChecked属性。 如果要设置checked属性，则需要在onChange处理程序中更改相应 object 的signedOff属性。