TypeError：this.props.clickitemは関数ではありません

Question

子コンポーネントとしてRoundedButtonコンポーネントを作成しました。私は

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    this.clickitem = this.clickitem.bind(this); 
    } 

    clickitem(buttonText) { 
    console.log(buttonText); 
    } 

    render() { 
    return (
     <div className="AppTitle"> 
     <b>Score:</b> 
     <div> 
      <RoundedButton text="Rock" clickitem={this.clickitem} /> 
      <RoundedButton text="Paper" /> 
      <RoundedButton text="Scissors" /> 
     </div> 
     </div> 
    ); 
    } 
} 

export default App; 

は App.js

_handleButtonClick(item) { 
    this.props.clickitem(item.buttonText); 
    } 

コンパイラはエラーをスロー

TypeError: this.props.clickitem is not a function 
RoundedButton._handleButtonClick 
D:\ReactJS\xxx\src\RoundedButton.js:8 
    5 | state = {}; 
    6 | 
    7 | _handleButtonClick(item) { 
> 8 | this.props.clickitem(item.buttonText); 
    9 | } 
    10 | 
    11 | render() { 
View compiled 

RoundedButton.js

に

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

class RoundedButton extends Component { 
    state = {}; 

    _handleButtonClick(item) { 
    this.props.clickitem(item.buttonText); 
    } 

    render() { 
    let buttonText = this.props.text; 
    return (
     <button 
     type="button" 
     className="Button" 
     onClick={this._handleButtonClick.bind(this, { buttonText })} 
     > 
     {buttonText} 
     </button> 
    ); 
    } 
} 

export default RoundedButton; 

を使用して親コンポーネントに誰をクリックボタンの値をすることができ、送信しています私を助けて私は間違っている？

Answer 1

コードは機能します。しかし、テキストが "rocks"に設定されたRoundedButtonの場合。あなたは

class RoundedButton extends React.Component { 
 
    state = {}; 
 

 
    _handleButtonClick(item) { 
 
    this.props.clickitem(item.buttonText); 
 
    } 
 

 
    render() { 
 
    let buttonText = this.props.text; 
 
    return (
 
     <button 
 
     type="button" 
 
     className="Button" 
 
     onClick={this._handleButtonClick.bind(this, { buttonText })} 
 
     > 
 
     {buttonText} 
 
     </button> 
 
    ); 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = {}; 
 
    this.clickitem = this.clickitem.bind(this); 
 
    } 
 

 
    clickitem(buttonText) { 
 
    console.log(buttonText); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div className="AppTitle"> 
 
     <b>Score:</b> 
 
     <div> 
 
      <RoundedButton text="Rock" clickitem={this.clickitem} /> 
 
      <RoundedButton text="Paper" clickitem={this.clickitem}/> 
 
      <RoundedButton text="Scissors" clickitem={this.clickitem}/> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

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