ReactJS onClick不會觸發

我無法在0123中使用onClick在reactJS中工作。我把this fiddle放在一起，肯定是一件小事。代碼如下，請參閱fildle的（不）工作示例：ReactJS onClick不會觸發

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

來源

2016-03-11 spirytus

你只需要通過傳遞處理器爲道具：

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中並不存在（只有div實際上存在）。

來源

2016-03-11 21:25:12

而且你還錯過了初始化state

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

否則，你會得到一個錯誤

Uncaught TypeError: Cannot read property 'width' of null

我更喜歡用這種方式

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

它也可以使用樣式反應。 Fiddle example

感謝

來源

2016-03-11 21:32:49

你只需要功能與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)}} >

來源

2016-08-15 06:54:07

ReactJS onClick不會觸發

回答

相關問題