ReactJS onClick不會觸發

Question

我在使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')
);

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上創建沒有單擊偵聽器的div，因為dom中實際上並不存在“ Bar”（只有div實際上存在）。

Answer 2

而且您也錯過了初始化state

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

否則你會得到一個錯誤

未捕獲的TypeError：無法讀取null的屬性“ width”

我更喜歡用這種方式

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