Question

我使用Material UI代替React。

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

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

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

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

Answer 1

这似乎不是故意行为。我能够检查并取消选中Checkbox，而不使用以下代码触发Tab的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，但似乎也有类似的效果。

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

1 个答案: