我对react很陌生，我坚持了一些想法。我的问题是 onclick 没有启动。
class Application extends React.Component{
render () {
return (
<div>
<button onClick={alert("hello world")}>Hello Application</button>
</div>
)
}
}
ReactDOM.render(<Application />,document.getElementById("tar"));
我期待当单击按钮时，会显示 hello world 警报。然而，这并没有发生！这是为什么？
alert()将它分配给onClick按钮的事件时，您正在调用。
尝试将其包装在 es6 箭头函数中。
<button onClick={() => { alert("hello world")} }>Hello Application</button>
或者更好..使它成为组件上的方法，您将其作为处理程序传递给按钮，如下所示：
class Application extends React.Component {
constructor( props ) {
super( props );
// since you're using this method in a callback, don't forget to
// bind the this context
this.handleClick = this.handleClick.bind( this );
}
handleClick() {
alert( "hello world" );
}
render(){
return(
<div>
<button onClick={ this.handleClick }>Hello Application</button>
</div>
);
}
}
onClick 将运行提供给它的函数。如果你愿意
onClick={() => alert("hello world")} /** es6 **/
或者
onClick={function() { alert("hello world"); }}
你需要绑定onclick按钮
class Application extends React.Component{
render(){
return(
<div>
<button onClick={() => alert("hello world")}>Hello Application</button>
</div>
)
}
}
ReactDOM.render(<Application />,document.getElementById("tar"));
因为您将警报作为对象而不是要完成的方法，所以您需要将警报包装在类的函数或方法中。试试这个代码：
class Application extends React.Component{
render(){
return(
<div>
<button onClick={() => alert("hello world")}>Hello Application</button>
</div>
)
}
}
ReactDOM.render(<Application />,document.getElementById("tar"));