React - ボタンonclickイベントがコンポーネント内で機能しない

Question

2つのボタンとオンイベントでコンポーネントを作成しました。警告メッセージが表示されます。コードにエラーは表示されませんが、ボタンは何も起こらない。

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

のonclickのメタを動作するはずですODは.Isは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; 

がhere.Pleaseでみません間違っている https://codesandbox.io/s/xzxqyqn58z

Answer 2

リアクタンス要素によるイベントの処理は、DOM要素のイベント処理と非常によく似ています。いくつかの構文上の違いがあります。

• はイベントではなく小文字よりも、キャメルケースを使用して命名されている反応します。
• JSXでは、文字列ではなくイベントハンドラとして関数を渡します。

はキャメルケースにあなたのonclickイベントの名前を変更し、それが

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

スニペット

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

<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"/>