如何更改react中的复选框项目的值？ （在sql中更改一个值）

Question

首先，很抱歉，如果标题用词不正确，我不确定如何更好地说明它。 所以我的问题是我在mysql中有一个数据库，其中包含不同的Bikes（想象我有两辆来自钻石的自行车，一辆来自scott的自行车，等等），这些数据库在我的数据库中存储在不同的物理位置，标签为FK_LocationID。

我希望能够通过检查我想移动的自行车并通过从下拉列表中选择（不需要）将它们移动到两个位置来“将”这些自行车从一个位置“移动”到另一位置。我想更改复选框自行车的FK_LocationID。我有5排自行车（有5个不同的位置，圣安娜（Santa Ana）的位置ID为1）

export default class Locations extends Component {
  bikes1 = [];
  bikes2 = [];
  bikes3 = [];
  bikes4 = [];
  bikes5 = [];
  render() {
    return (

      <div>
        <Card title="Locations">
          <Row>
            <Column>
              <p>1 - Haugastøl</p> // i have 5 of these
              <List>
                {this.bikes1.map(bike1 => (
                  <List.Item key={bike1.BikeID}>
                    <input type="checkbox" checked={bike1.checked} onChange={e 
         => bike1.checked = e.target.checked}/> {bike1.BikeID} - {bike1.Brand}
                  </List.Item>
                ))}
              </List>

          <select id="Location" value={this.FK_LocationID} onChange={e => (this.FK_LocationID= e.target.value)}>
            <option value={0}>Choose location..</option>
            <option value={1}>Haugastøl</option>
            <option value={2}>Finse </option>
            <option value={3}>Flåm </option>
            <option value={4}>Voss </option>
            <option value={5}>Myrdal </option>
          </select>



  mounted() {
    locationService.getBikesLocation1(bikes1 => { // 5 of these aswell
      for(let bike of bikes1) bike.checked = false;
      this.bikes1 = bikes1;
    }); 
    locationService.getBikesLocation2(bikes2 => {
      for(let bike of bikes2) bike.checked = false;
      this.bikes2 = bikes2;
    });

基本上，我做了一个下拉列表，多个复选框，现在还不确定如何实际更改选中项目的FK_LocationID。我真的很感谢这里的任何帮助，这对React和JavaScript都是新的。

问候

Answer 1

您实际上不需要状态。您可以/应该做的是将复选框放在表单或json对象中，并将其发布到后端，然后从那里对数据库进行更改。本地状态将无助于更改后端，并且由于您提到了sql，所以我假设您拥有一个。如果我错了，对不起，但只是意识到本地状态不是持久性的，那么当您重新启动应用程序时，您将需要重做更改。