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

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

然后，您可以检查render方法的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>

Answer 2

由于它是一个包含多个复选框状态的数组，因此您需要告诉handleChange 您要更改哪个复选框：

<Checkbox
  key={i}
  onChange={(e) => this.handleChange(e, i)}
  name={list.id}
  value="Yes"
  label={description}
/>

然后，您必须创建状态数组的临时副本，更改适当的项，然后用新的替换旧的数组：

handleChange(e, i) {
  const arr = this.state.listid.slice();
  arr[i] = e.target.name;
  this.setState({listid: arr});
}

不过，更好的方法是将索引i作为道具传递到Checkbox，然后执行：this.props.onClick(this.props.index)或类似的操作。

Answer 3

啊，经典。这是您可以对renderCheckBox进行的更改。

        <Checkbox
            key={i}
            onChange={(el) => this.handleChange(el, i)}
            name={list.id}
            value="Yes"
            label={description}
        />

然后您可以在handleChange中

handleChange(el, index) {
  let listid = [ ...this.state.listid ];
  listid[index] = el.target.name;
  this.setState({
    listid,
});

反应-将数组传递给setState吗？

3 个答案: