如何使用 React-Bootstrap 中的開關按鈕在地圖中設置 onchange？

Question

我想為我在map函數中創建的每個復選框設置onChange事件。 不幸的是，如果我點擊一個復選框，我得到了正確的目標 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>
        </>
    )
 }
}

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>

      </>
  )
}

}

Answer 2

您需要存儲每個user id的checked狀態。 一個可能的解決方案是使用一個object ，其中keys是user ids ，值是已檢查的狀態。 如果key不存在，則相當於unchecked ：

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

    this.setState(
        ({checked}) => ({
            checked: {
                ...checked,
                [e.target.id]: isChecked,
            }
        })
    );
}

然后你可以設置checked您的復選框從國家的狀態：

{this.state.user.map(user => (
    <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[user.SD_Emplid]}
                className="checkBoxCard"
                type="switch"
                id={user.SD_Emplid}
                label=""
            />
        </div>
    </Col>
)}

確保將您的checked狀態初始化為一個對象：

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