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不会触发

回答

相关问题