javascript - React - 将数组传递给 setState？

Question

如何将数组传递到 setState 中？正如您所看到的，有一个呈现的复选框，一旦调用 onchange ，id 就会被放入状态，但如果有多个复选框，则每次调用 onchange 时它都会覆盖。

  getInitialState() {
    return {
        listid: []
    }
},    


  handleChange() {
    this.setState({
        listid: e.target.name,
    });
},

 renderCheckbox() {
    const data = this.state.data || [];
    return data.map((list, i) => {
        return (
            <Checkbox
                key={i}
                onChange={this.handleChange}
                name={list.id}
                value="Yes"
                label={description}
            />
        );
    });
},

Answer 1

如果 listid 数组中存在复选框 ID，您可以检查 handleChange 函数。如果是，则将其删除。如果不是，请添加它。

然后，您可以检查渲染方法中的 listid 数组中是否存在复选框 ID，以决定是否应选中它。

示例

class App extends React.Component {
  state = {
    checkboxes: [{ id: "1" }, { id: "2" }, { id: "3" }, { id: "4" }],
    listIds: []
  };

  handleChange = event => {
    const { name } = event.target;
    this.setState(prevState => {
      const { listIds } = prevState;
      if (listIds.includes(name)) {
        return { listIds: listIds.filter(id => id !== name) };
      } else {
        return { listIds: [...listIds, name] };
      }
    });
  };

  render() {
    const { checkboxes, listIds } = this.state;
    return (
      <div>
        {checkboxes.map(checkbox => (
          <input
            key={checkbox.id}
            type="checkbox"
            checked={listIds.includes(checkbox.id)}
            name={checkbox.id}
            onChange={this.handleChange}
          />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>