Reactjs TypeError:this.props.clickitem不是函数

我已经创建了

RoundedButton

组件作为子组件。我正在使用将单击按钮值发送到父组件中

  _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;

import React，{Component}来自“React”；
导入“/App.css”；
类RoundedButton扩展组件{
状态={}；
_把手按钮（项目）{
this.props.clickitem（item.buttonText）；
}
render（）{
让buttonText=this.props.text；
返回(
{buttonText}
);
}
}
导出默认圆形按钮；

App.js

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;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
this.clickitem=this.clickitem.bind（this）；
}
单击项目（按钮文本）{
控制台日志（buttonText）；
}
render（）{
返回(
分数：
);
}
}
导出默认应用程序；

---

有人能帮我找出我做错了什么吗？

你的代码可以正常工作。但是，对于文本设置为“rocks”的RoundedButton。但是，您可能忘记在其他两个RoundedButton组件上放置clickitem道具

class RoundedButton扩展React.Component{
状态={}；
_把手按钮（项目）{
this.props.clickitem（item.buttonText）；
}
render（）{
让buttonText=this.props.text；
返回(
{buttonText}
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
this.clickitem=this.clickitem.bind（this）；
}
单击项目（按钮文本）{
控制台日志（buttonText）；
}
render（）{
返回(
分数：
);
}
}
ReactDOM.render（，document.getElementById（'app'））

我猜有一些代码丢失或
\u handleButtonClick
没有从您认为的位置被调用。您是否尝试过
这个。在
App.js中点击.bind（这个）
？使用
propTypes
检查哪个组件传递错误
点击项目
。能否确保RoundedButton组件中存在此.props.clickitem？我猜它还没有定义。尝试console.log。我建议您为组件声明道具类型。在遇到这样的错误之前，您和您团队的其他成员将收到有关错误或丢失属性的警告。