Question

我已经为他们编写了一个带有两个按钮和点击事件的组件，它应该显示一条警告消息。我没有在代码中收到任何错误，但是当我点击按钮时没有任何反应。

import React, { Component } from 'react';

     class Vehicle extends Component{
       remove(){
        alert("Remove button clicked");
    }
    submit(){
        alert("Submit button clicked");
    }

        render()
        {

             return(<div>
                 <h1>Select your Vehicle</h1>
                 <input type='submit' onclick={this.submit} value="Click Me"></input>
                 <button type="button" onclick={this.remove}>Reset</button>
                 </div>
            );
    }

    }
    export default Vehicle;

Answer 1

使用React元素处理事件与处理DOM元素上的事件非常相似。有一些句法差异：

使用camelCase命名反应事件，而不是使用小写。
使用JSX，您可以将函数作为事件处理程序传递，而不是字符串。

将您的onclick事件重命名为camelCase，它应该可以正常工作

render()
    {

         return(<div>
             <h1>Select your Vehicle</h1>
             <input type='submit' onClick={this.submit} value="Click Me"></input>
             <button type="button" onClick={this.remove}>Reset</button>
             </div>
        );
}

<强>段

＆＃13;

class Vehicle extends React.Component{
       remove(){
        alert("Remove button clicked");
    }
    submit(){
        alert("Submit button clicked");
    }

        render()
        {

             return(<div>
                 <h1>Select your Vehicle</h1>
                 <input type='submit' onClick={this.submit} value="Click Me"></input>
                 <button type="button" onClick={this.remove}>Reset</button>
                 </div>
            );
    }

    }
    
ReactDOM.render(<Vehicle/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>
<div id="app"/>

＆＃13;

Answer 2

onclick方法错误。我没有点击onClick ...

试试这个

import React, { Component } from 'react';

     class Vehicle extends Component{
       remove(){
        alert("Remove button clicked");
    }
    submit(){
        alert("Submit button clicked");
    }

        render()
        {

             return(<div>
                 <h1>Select your Vehicle</h1>
                 <input type='submit' onClick={this.submit} value="Click Me"></input>
                 <button type="button" onClick={this.remove}>Reset</button>
                 </div>
            );
    }

    }
    export default Vehicle;

运行代码在这里。请检查 https://codesandbox.io/s/xzxqyqn58z

React - 按钮onclick事件在Component中不起作用

2 个答案: