ReactJS onClick 不会触发

ReactJS onClick doesn't trigger

本文关键字：onClick ReactJS      更新时间：2023-09-26

我在让onClick在 reactJS 中工作时遇到了麻烦。我把这个小提琴放在一起，确信它是微不足道的。代码如下，请参阅fildle的（非）工作示例：

var Bar=React.createClass({
    render: function() {
    return (
    <div className="bar" style={{width: this.props.width+"px"}}>                {this.props.width}</div>)
  }
})
var ClickableBar=React.createClass({
    clickBar: function(e) {
        alert('clicked');
        this.setState({width:220});
    },
    render: function() {
      return (
      <Bar onClick={this.clickBar} width={this.state.width}/>
      )
  }
})
ReactDOM.render(
  <ClickableBar width="20"/>,
  document.getElementById('container')
);

你只需要将处理程序作为道具传递：

var Bar = React.createClass({
    render: function() {
    return (
      <div onClick={this.props.onClick} className="bar" style={{width: this.props.width+"px"}}>{this.props.width}</div>
    );
  }
});

否则，您的div 将在没有点击侦听器的情况下创建，因为 dom 中实际上并不存在"Bar"（实际上只有div 存在）。

而且您还错过了初始化state 

getInitialState: function(){
  return {
    width: 30
  }
}

否则你会得到一个错误

未捕获的类型错误： 无法读取 null 的属性"width"

我更喜欢以这种方式使用样式

render(){
  var myStyle = {width: 200, backgroundColor: green};
  return <div style={myStyle }> ... </div>
}

它也适用于 React。 Fiddle example

谢谢

你只需要将函数与 DOM 元素绑定。

<Bar onClick={this.clickBar.bind(this)} width={this.state.width}/>

或

<Bar onClick={() => {this.clickBar()}} width={this.state.width}/>

如果要通过传递事件来调用函数： 

<select onClick = {(event) => {self.funcName(event)}} >

如果要通过传递参数来调用函数：

 <select onClick = {(event) => {self.funcName(event, arg1)}} >
相关文章：