为什么 onchange 函数不能使用语义 class

Question

我使用 reactjs 和语义 ui 并想在输入复选框上调用 OnChange 函数：

App.js

getChecked = (e) => {
    if(e.target.checked === true){
        this.setState({
            rent: '1'
        });
    } else {
        this.setState({
            rent: '0'
        });
    }
    console.log(e);
};

..

<Input onChange={this.getChecked} type="checkbox" name="isRent" id="isRent" value={this.state.rent}/>

此代码完美运行JSFiddle

但是当我在此输入上使用语义 ui 中的复选框 class 时，onChange 函数不再起作用 JSFiddle

之前:

<input type="checkbox" onChange={this.getChecked}/>

之后：

<div className="ui slider checkbox">
<input type="checkbox" onChange={this.getChecked}/>
</div>

知道为什么它现在有效吗？

Answer 1

这是因为当应用语义 ui 类时，input 得到的 z-index 值为 -1。（尝试检查它）。
所以，现在 input 永远不会被点击，因此 onChange 函数不会被调用。

你可以做什么，让 checkbox 受控。

  state = { checked: false }
  toggle = () => this.setState(prevState => ({ checked: !prevState.checked }))

  render() {
    return (
      <div className="ui slider checkbox" onClick={this.toggle}>
        <input type="checkbox" checked={this.state.checked}/>
      </div>
    )
  }

为什么 onchange 函数不能使用语义 class

Why onchange function not working with semantic class

javascript

reactjs

semantic-ui