Question

我无法让onClick在reactJS中工作。我把this fiddle放在一起，我确信这是微不足道的。代码如下，请参阅fildle for（not）工作示例：

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

你只需要将处理程序作为prop：

传递

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将在没有点击监听器的情况下创建，因为＆＃34; Bar＆＃34;在dom中确实不存在（只有div实际存在）。

Answer 2

您还错过了初始化state

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

否则您将收到错误

未捕获的TypeError：无法读取属性＆＃39; width＆＃39;为null

我更喜欢以这种方式使用风格

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)}} >

ReactJS onClick不会触发

3 个答案: