Question

我试图跟踪在我的本地状态下选中了哪些框（您可以选中多个框）。我希望能够选中和取消选中这些框，并跟踪选中的框的ID。稍后，我将使用这些值进行处理。这是我到目前为止的内容：

    import React, { Component } from 'react'
    import './App.css'
    import  CheckBox  from './CheckBox'


    class App extends Component {
      constructor(props) {
        super(props)
        this.state = {
          fruits: [
            {id: 1, value: "banana", isChecked: false},
            {id: 2, value: "apple", isChecked: false},
            {id: 3, value: "mango", isChecked: false},
            {id: 4, value: "grape", isChecked: false}
          ],
          fruitIds: []
        }
      }

      handleCheckChildElement = (e) => {
        const index = this.state.fruits.findIndex((fruit) => fruit.value === e.target.value),
          fruits = [...this.state.fruits],
          checkedOrNot = e.target.checked === true ? true : false;
          fruits[index] = {id: fruits[index].id, value: fruits[index].value, isChecked: checkedOrNot};
          this.setState({fruits});
          this.updateCheckedIds(e);
        }

      updateCheckedIds = (e) => {
        const fruitIds = [...this.state.fruitIds],
            updatedFruitIds= fruitIds.concat(e.target.id);
          this.setState({updatedFruitIds});
      }

      render() {
        const { fruits } = this.state;
        if (!fruits) return;

        const fruitOptions = fruits.map((fruit, index) => {
          return (
            <CheckBox key={index}
              handleCheckChildElement={this.handleCheckChildElement}
              isChecked={fruit.isChecked}
              id={fruit.id}
              value={fruit.value}
            />
          );
        })

        return (
          <div className="App">
          <h1>Choose one or more fruits</h1>
            <ul>
            { fruitOptions }
            </ul>
          </div>
        );
      }
    }

    export default App

因此，基本上，我能够选中和取消选中该框，但似乎无法更新和存储fruitIds。这也是我的复选框组件：

    import React from 'react'

    export const CheckBox = props => {
        return (
          <li>
            <input key={props.id}
              onChange={props.handleCheckChildElement}
              type="checkbox"
              id={props.id}
              checked={props.isChecked}
              value={props.value}
            />
            {props.value}
          </li>
        )
    }


    export default CheckBox

此外，如果您有比我更清洁的方法来做这件事，我也很乐意看到它。

Answer 1

这就是我要采取的措施。我将创建一个一维数组，其中包含一个水果的ID，如果单击（选中）一个水果，我会将其ID添加到该数组中；当第二次单击它时，我检查该数组是否已具有ID，然后将其删除。那么数组中id的存在将意味着检查了水果，否则未检查水果，所以我将执行以下操作

  this.state={
    fruitsIds: []
   }
  handleCheckChildElement=(id) => {
//the logic here is to remove the id if its already exist else add it. and set it back to state
   const fruitsIds = this.state.fruitsIds;
    this.setState({fruitsIds: fruitsIds.contains(id) ? fruitsIds.filter(i => i != id) : [...fruitsIds, id] })
   }

然后我渲染

之类的复选框

    <CheckBox key={index}
     handleCheckChildElement={this.handleCheckChildElement}
     isChecked = { this.state.fruitsIds.contains(fruit.id)}
     id={fruit.id}
   />

这是因为您始终可以使用id来获取水果的所有其他属性，因此绝对不需要再次存储它们。那么复选框组件应如下所示

export const CheckBox = props => {
    return (
      <li>
        <input key={props.id}
          onChange={() => props.handleCheckChildElement(props.id)}
          type="checkbox"
          id={props.id}
          checked={props.isChecked}
          value={props.value}
        />
        {props.value}
      </li>
    )
}

Answer 2

未更新ID的原因是：

您正在尝试将非数组元素连接到数组。 concat用于连接两个或多个数组。

updatedFruitIds = fruitIds.concat（e.target.id）;
您没有更新实际的fruitIds状态字段。我不知道您为什么要使用“ updatedFruitIds”此变量，但是由于上述错误，它将始终导致单个元素数组。

this.setState（{updatedFruitIds}）;

  updateCheckedIds = e => {
    const fruitIds = [...this.state.fruitIds],
      updatedFruitIds = fruitIds.concat([e.target.id]);
    this.setState({ fruitIds: updatedFruitIds });
  };

OR

  updateCheckedIds = e => {
    const fruitIds = [...this.state.fruitIds, e.target.id],
    this.setState({ fruitIds });
  };

在ReactJS中，我如何跟踪一组复选框的状态？

2 个答案: