javascript - 如何更改 react 中复选框项目的值？ (更改sql中的一个值)

Question

首先，如果标题措辞不好，我很抱歉，我不知道如何更好地表达它。 所以我的问题是，我在 mysql 中有一个包含不同自行车的数据库(假设我有两辆来自 Diamond 的自行车，一辆来自 scott 等的自行车)，它们在我的数据库中存储在带有标签 FK_LocationID 的不同物理位置。

我希望能够通过检查我想要移动的自行车并通过从下拉菜单中选择我想要移动它们的位置(不是必需的)来将这些自行车从一个位置“移动”到另一个位置。 Tldr 我想更改复选框自行车的 FK_LocationID。我有 5 组自行车(有 5 个不同位置，圣安娜位置 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，我假设您有一个。如果我错了，抱歉，但要意识到本地状态不是持久的，因此当您重新启动应用程序时，您将需要重做更改。