为什么 Checkbox 会在 material-ui 中触发 Tabs onChange 事件？答案

【问题标题】：Why does Checkbox fires Tabs onChange event in material-ui?为什么 Checkbox 会在 material-ui 中触发 Tabs onChange 事件？
【发布时间】：2016-09-14 14:49:56
【问题描述】：

我将 Material UI 用于 React。

我在标签内有一个复选框：

const Layout = () => (
<Tabs value='a' onChange={e => console.log(e)}>
  <Tab label='a' value='a'>
    <Checkbox />
  </Tab>
</Tabs>
);

当我点击复选框 Tabs' onChange 事件被触发。是故意行为吗？有没有办法避免这种情况？

这里是一个例子：https://github.com/evgeny-t/material-ui-webpack-example/compare/master...evgeny-t:checkbox-inside-tabs?expand=1

【问题讨论】：

你有 jsbin 或 codepen 吗？这听起来不像是正常行为。
@AvraamMavridis 我已经更新了这个问题。该分支包含一些不相关的更改。

标签： reactjs material-ui

【解决方案1】：

这似乎不是故意的行为。我能够检查和取消选中复选框，而无需使用以下代码触发选项卡的 onChange：

handleChangeCapture(e) {
    e.stopPropagation();
}
checkUncheck(e) {
    console.log('change')
    this.setState({
        isChecked: !this.state.isChecked
    });
}

render() {
    return (
        <MuiThemeProvider muiTheme={muiTheme}>
            <Tabs value='a' onChange={ e => console.log(e) }>
                <Tab label='a' value='a'>
                    <div onChangeCapture={this.handleChangeCapture}>
                        <Checkbox onClick={this.checkUncheck} checked={this.state.isChecked}/>
                    </div>
                </Tab>
            </Tabs>
        </MuiThemeProvider>
    );
}

当然，我在状态中添加了isChecked: false，并放入了构造函数this.checkUncheck = this.checkUncheck.bind(this);。在父 div 上使用 onChangeCapture 并停止事件的传播（使用 stopPropagation）基本上就是我所做的。 This answer explains how onClickCapture works。我没有在documentation 中明确找到 onChangeCapture，但它的工作原理似乎相似。

【讨论】：