Question

我很反应，我坚持一些想法。我遇到的问题是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会显示警告。但是，这没有发生！那是为什么？

Answer 1

在将"apple pear orange"分配给按钮的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>
        );
    }
}

Answer 2

onClick将运行提供给它的函数。如果你愿意的话

 onClick={() => alert("hello world")} /** es6 **/

或

onClick={function() { alert("hello world"); }}

Answer 3

您需要绑定onclick按钮

Vector2

Answer 4

因为您将alert作为对象而不是mthod来完成，所以您需要将警报包含在类的函数或方法中。试试这段代码：

class Application extends React.Component{
 render(){
  return(
    <div>
     <button onClick={() => alert("hello world")}>Hello Application</button>

  </div>

  )
 }  

}

ReactDOM.render(<Application />,document.getElementById("tar"));

onclick没有反应

4 个答案: