onClickイベントは起動しません

Question

重複した質問を申し訳ありませんが、他の投稿に表示された有効な回答は、私が試した内容とまったく同じです。私は単にボタンのonClickイベントを発生させようとしています。それは起動せず、私のhandleClickNewQuoteメソッド内のコードのゼロが実行されます。

私はあなたが本当に私がリアクトに新しいことを伝えると確信しています。これは私のアプリの草案です。

import React, { Component } from 'react'; 
import './App.css'; 
import axios from 'axios'; 




class App extends Component { 
    constructor(props){ 
    super(props) 
    this.state={ 
     quote: this.quote, 
     author: this.author, 
     category: this.category 
    } 
    this.handleClickNewQuote = this.handleClickNewQuote.bind(this); 
    // this.handleClickTweet = this.handleClickTweet.bind(this); 
    // this.handleClickSave = this.handleClickSave.bind(this); 
    } 

    //Fires when app is loaded~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

    componentDidMount(){ 
    axios.get('http://localhost:3001/api/getQuote').then(response =>{ 
     this.setState({quote: response.data.quote, 
        author: response.data.author, 
        category: response.data.category}) 
    }).catch(console.log) 
    } 

    //Fires when NewQuote is clicked, makes API call to server and gets data back 

    handleClickNewQuote(){ 
    axios.get('http://localhost:3001/api/getQuote').then(response =>{ 
     this.setState({quote: response.data.quote, 
        author: response.data.author, 
        category: response.data.category}) 
    }).catch(console.log) 
    console.log("Button is working?"); 
    } 


    render() { 
    return (
     <div className="App"> 
     <div id="main-container"> 
      <div id="quote-box"> 
      <p id="quote-text">{this.state.quote}</p> 
      <div id="author-name"> 
      <p id="author-text">{this.state.author}</p> 
       <div id="button-box"> 
       <button type="button" className="button-color" id="save-button">Save</button> 
       <button type="button" className="button-color" id="tweet-button">Tweet</button> 
       <button type="button" className="button-color" id="new-quote-button" onClick={() => {this.handleClickNewQuote}}>New Quote</button> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

export default App; 

Answer 1

あなたの矢印機能でonClickにあなたが実行されるようにhandleClickNewQuote()機能を返すされていないからです。

あなたは次のことをやったのであれば、それは火になります。

onClick={() => this.handleClickNewQuote}

しかし、これを簡素化するために、さらに私たちは完全にラッピング機能を削除することができます：火災へ

onClick={this.handleClickNewQuote}