javascript - 我如何使用 React-Bootstrap 的 React for Switch Buttons 在 map 中设置 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

您需要为每个用户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: {},
}