如何在反应中为多个复选框设置处理程序？

Question

我在我的小项目中创建了多个复选框。 我在打勾的同时检索复选框的信息时遇到问题。 如果我在玩具上打勾，那么价值应该是toys或者如果我在toys和lights上都打勾，我应该在控制台中同时获得玩具和灯。

这是代码：

import React from "react";
import { render } from "react-dom";
import { Segment, Form, Checkbox, Button } from "semantic-ui-react";
import axios from "axios";
export default class ShowForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      event: ""
    };
  }
  handleCheck = event => {
    console.log("Hello", event);
  };
  render() {
    return (
      <div>
        <Segment>
          <Form>
            <Checkbox label="Cake" onChange={this.handleCheck} />
            <br />
            <Checkbox label="Lights" onChange={this.handleCheck} />
            <br />
            <Checkbox label="Flowers" onChange={this.handleCheck} />
            <br />
            <Checkbox label="Toys" onChange={this.handleCheck} />
            <br />
            <Button onClick={this.handleSubmit}> Submit </Button>
          </Form>
        </Segment>
      </div>
    );
  }
}

这是完整的代码：“ https://codesandbox.io/s/zealous-paper-p9zb5 ”

任何人都可以帮我解决这个问题吗？

Answer 1

您需要一个数组来存储所有选中的状态。

handleCheck = id => () => {                      // Get indentify from each element
  const { checkedList } = this.state;
  const result = checkedList.includes(id)        // Check if checked at this moment
    ? checkedList.filter(x => x !== id)          // If checked, remove
    : [...checkedList, id];                      // If not, add
  this.setState({ checkedList: result }, () => { // setState
    console.log(this.state.checkedList);         // setState is async, log in callback
  });
};

如果你愿意，你可以让Checkbox组件成为一个通用组件，这样你就不需要在每个组件的三个地方绑定label 。

<Checkbox
  label="Cake"
  onChange={this.handleCheck("Cake")}
  checked={checkedList.includes("Cake")}   // If included, checked
/>

---

另一个最小可重复演示

在文本中尝试：

 const list = [...Array(10).keys()].map(x => ({ id: x })); const App = () => { const [selected, setSelected] = React.useState([]); const onChangeHandler = id => () => { selected.includes(id) ? setSelected(selected.filter(x => x !== id)) : setSelected([...selected, id]); }; const onRemove = () => { setSelected([]); }; return ( <div className="App"> {list.map(item => ( <input type="checkbox" key={item.id} checked={selected.includes(item.id)} onChange={onChangeHandler(item.id)} /> ))} <br /> <button onClick={onRemove}>Remove all</button> <div>{selected.join(",")}</div> </div> ); } ReactDOM.render(<App />, document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Answer 2

可以肯定的是，您可以通过 ES6 命名属性和箭头函数来创建一个干净的流程

考虑一个状态：

this.state={
   isToy: false,
   isCake: false,
   isFlower: false,
   isLight: false
}

添加名称属性。 理想情况下，这些名称应该与 state 中的名称相匹配。

<Form>
    <Checkbox name="isCake" label="Cake" checked={this.state.isCake} onChange={this.handleCheck} />
    <Checkbox name="isLight" label="Lights" checked={this.state.isLight} onChange={this.handleCheck} />
    <Checkbox name="isFlower" label="Flowers" checked={this.state.isFlower} onChange={this.handleCheck} />
    <Checkbox name="isToy" label="Toys" checked={this.state.isToy} onChange={this.handleCheck}  />
    <Button onClick={this.handleSubmit}> Submit </Button>
</Form>

然后编写 handleCheck 箭头函数，使用 ES6 名称属性功能访问状态属性：

handleCheck = (event) => {
   let name = event.target.name
   this.setState{[name]: !this.state[name]}
}

参考：

反应控制表单： https : //reactjs.org/docs/forms.html

语义 UI 复选框： https : //react.semantic-ui.com/modules/checkbox/#usage-remote-control