如何维护表格视图中每个单选按钮的状态 - 反应

Question

我有下面的 html 表格视图。 使用 React，当用户连续更改任何单选按钮时，我试图更改 checked 值。

我正在尝试这个 onchange 函数，但它不起作用

changeStatus(e)
{
  if(e.target.value === 'on')
  {
    e.target.checked = true
  }
  else
  {
    e.target.checked = false
  }
  console.log(e.target.value + e.target.checked)
}

渲染函数

    {records.length>0 && records.map((row,i) => (
              // this.state.radio_val[row.id] = row.status;
            <tr key={i}>
              <td>{i+1}</td>
              <td>{row.name}</td>
              <td>          
                  <div className="form-check form-switch">
                  <input className="form-check-input" type="checkbox"  onChange={this.changeStatus.bind(this)} />
                  {/* <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label> */}
                  </div>
              </td>
              <td>
              <Link to={"/brand/"+row.slug}>
              <button type="button" className="btn btn-sm btn-info active"> <i className="fas fa-edit"></i > Edit</button>
              </Link>
              </td>
            </tr>
   ))}

请指导我维护单选按钮行的状态。我想在更改值的同时更改单选按钮的状态。

Answer 1

您需要维护数组中复选框的状态。

这是一个使用基于类的组件的example

  state = {
    checkboxes: Array(10).fill(false)
  };

  updateCheckbox(selectedIndex, { target: { checked } }) {
    this.setState(({ checkboxes }) => ({
      checkboxes: checkboxes.map((prev, index) =>
        index === selectedIndex ? checked : prev
      )
    }));
  }

和 JSX

{this.state.checkboxes.map((checked, index) => (
          <input
            key={index}
            type="checkbox"
            checked={checked}
            onChange={this.updateCheckbox.bind(this, index)}
          />
))}

当复选框发生变化时，对应的元素会根据索引进行更新。您可以使用 id 代替索引。