ReactJS onClick未触发

Question

在reactJS中让onClick工作时遇到了问题。我把this fiddle放在一起，肯定是些微不足道的东西。代码如下，请参见文件，了解(非)工作示例：

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')
);

Answer 1

您只需要将处理程序作为一个道具传递：

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将在没有单击侦听器的情况下创建，因为"Bar“实际上并不存在于dom中(实际上只有div在那里)。

Answer 2

而且你还错过了初始化你的state

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

否则您将得到一个错误

未捕获宽度:无法读取null的属性‘TypeError’

我更喜欢这样使用风格。

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

它还可以与React一起使用。Fiddle example

谢谢

Answer 3

您只需要将函数与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)}} >