我如何在反應中更改復選框項目的值？ （更改sql中的一個值）

Question

首先，對不起，如果標題措辭不好，我不知道如何更好地表述它。 所以我的問題是，我在 mysql 中有一個帶有不同自行車的數據庫（假設我有兩輛來自鑽石的自行車，一輛來自斯科特等的自行車），它們在我的數據庫中存儲在不同的物理位置，標簽為 FK_LocationID。

我希望能夠通過檢查我想要移動的自行車並通過從下拉列表中選擇（不是必需的）來選擇我想要移動它們的位置來將這些自行車從一個位置“移動”到另一個位置。 Tldr 我想更改復選框自行車的 FK_LocationID。 我有 5 組自行車（有 5 個不同的位置，Santa Ana 是 locationID 號 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 我假設您有一個。 如果我錯了，抱歉，但只是意識到本地狀態不是持久的，因此當您重新啟動應用程序時，您將需要重做更改。