如何在Javascript中处理事件冒泡

Question

我实现了一个项目列表的切换按钮。为了显示项目和切换按钮，我通过下面给出的循环运行它们。

renderRowValue = (values) => {
    const sourceId = values.id;
    const payload = {id: values.id, isActive: !values.isActive };
    return (
        <tr>
            <td key = {sourceId}>
                {values.name}
            </td>
            <td>
                <SwitchToggleButton
                    onChange={this.handleToggleChange(payload)}
                    defaultChecked={values.isActive}
                    label={"version2"}
                />
            </td>
        </tr>
    )
};

然后，我调用该函数来显示renderRowValue中的值，如下所示：

<Grid xs={12} sm={12} md={10} className="shadow-border">
                <Row>
                    <Table striped bordered hover>
                        <thead>
                        <tr>
                            <th>Source</th>
                        </tr>
                        </thead>
                        <tbody>
                        {values.map(this.renderRowValue)}
                        </tbody>
                    </Table>
                </Row>
            </Grid>

但主要的问题是，当我在others changes.For示例的值上切换一个按钮时，我打开了第一个项目，然后所有其他项目都会自动打开，就像我关闭它时一样。

处理切换开关的功能可以在下面找到：

handleToggleChange =(values) => {
    this.props.dispatch(values.isActive(values));
};

请告诉我，我如何解决这个问题，只为第一个项目打开它，而不影响其余的项目？

Answer 1

假设handleToggleChange与您的组件在同一个类中。

更新它，使其成为一个closure

handleToggleChange = (payload) = (e) => {
    e.preventDefault()
    this.props.dispatch(values.isActive(payload));
};


// renderRowValue 

<SwitchToggleButton
  onChange={this.handleToggleChange(payload)}
  defaultChecked={values.isActive}
  label={"version2"}
/>

Answer 2

这就是我试图尽可能接近你的代码，而不是真正看到你所有代码的方法。

https://gist.github.com/leslie-alldridge/5ffd25cfbd48c3134495b2245aa9d7ad