为什么 onchange 函数不适用于语义类答案

【问题标题】：Why onchange function not working with semantic class为什么 onchange 函数不适用于语义类
【发布时间】：2019-08-19 05:25:00
【问题描述】：

我使用 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 中的复选框类时，onChange 函数不再起作用 JSFiddle

之前：

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

之后：

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

知道为什么它现在可以工作了吗？

【问题讨论】：

您正在将 jQuery 与 react 混合使用，这一行搞砸了 $('.checkbox').checkbox(); 可能是 jQuery 为其添加了自己的处理程序，因此忽略了您的功能。不要再使用jQuery了！

标签： javascript reactjs semantic-ui

【解决方案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>
    )
  }

【讨论】：