javascript - 如何使用 React for Switch Buttons 从 React-Bootstrap 在地图中设置 onchange？

Question

我想为我在函数onChange中创建的每个复选框设置事件。map不幸的是，如果我单击一个复选框，我得到了正确的目标 ID，但所有复选框都不是被单击的复选框。那么我该如何处理呢？

constructor(props) {
    super(props);

    this.state = {
        user: [],
        checked: ''
    }
    this.handeClick = this.handeClick.bind(this);
}

handeClick(e) {
    console.log("Wurde geklickt: " + e.target.id);
    const item = e.target.name;
    const isChecked = e.target.checked;
    this.setState({ checked: isChecked });
}

[...]

render() {
    return (
        <>
            <Container fluid className="con">
                <Row className="justify-content-md-center">
                    {
                        this.state.user.map(user => {
                            return (
                                <Col md="3" key={user.SD_Emplid}>
                                    <div className="card">
                                        {user.SD_Anrede} <h2>{user.SD_Vorname}</h2>  <h4>{user.SD_Vorname}</h4>
                                        <hr></hr>
                                        <Form.Check
                                            onChange={this.handeClick}
                                            checked={this.state.checked}
                                            className="checkBoxCard"
                                            type="switch"
                                            id={user.SD_Emplid}
                                            label=""
                                        />
                                    </div>
                                </Col>
                            )
                        })
                    }
                </Row>
            </Container>
        </>
    )
 }
}

标签： javascriptreactjs

Answer 1

您检查的状态是布尔类型。每个项目将只检查检查是否为真，如果您只标记一个，则所有项目都将被检查。

可能您需要更改您的状态、检查功能以及项目是否被检查。像这样：

constructor(props) {
  super(props);

  this.state = {
      user: [],
      checked: []

  }


  this.handeClick = this.handeClick.bind(this);
}


handeClick(e) {
  console.log("Wurde geklickt: " + e.target.id);
  const checked = this.state.checked;

  if (checked.includes(e.target.id)) {
    newChecked = checked.filter(id => id !== e.target.id)
    this.setState({ checked: newChecked })
  } else {
    checked.push(e.target.value);
    this.setState({ checked })
  }
}

[...]




render() {
  const { checked } = this.state;
  return (
      <>
          <Container fluid className="con">
              <Row className="justify-content-md-center">

                  {
                      this.state.user.map(user => {
                          return (
                              <Col md="3" key={user.SD_Emplid}>
                                  <div className="card">
                                      {user.SD_Anrede} <h2>{user.SD_Vorname}</h2>  <h4>{user.SD_Vorname}</h4>
                                      <hr></hr>
                                      <Form.Check
                                          onChange={this.handeClick}
                                          checked={checked.includes(user.SD_Emplid)}
                                          className="checkBoxCard"
                                          type="switch"
                                          id={user.SD_Emplid}
                                          label=""

                                      />
                                  </div>
                              </Col>
                          )
                      })
                  }
              </Row>
          </Container>

      </>
  )
}

}