Question

我将 class Token { public: enum Type { INVALID = -1, NUM, ADD, SUB, MUL, DIV, EOF }; private: char* m_text; Type m_type; public: Token(Type type, char* text) : m_type(INVALID), m_text(nullptr) {} Type getType() const { return m_type; } char* getText() const { return m_text; } }; 从父级传递给子级并在onClick上实现了它。单击按钮时，出现错误：

this.props.function（）不是函数。

function

错误：bundle.js：34689未捕获TypeError：_this2.props.buttonClicked 不是onClick（bundle.js：34689）
的函数

Answer 1

通过箭头函数声明你的buttonClicked()词法绑定。或者，您可以bind the function in constructor。

您可以从那里访问e.target.value：

buttonClicked = e => {
  const page = e.target.value
  // do your setState
}

您应该将函数引用传递为这样的道具：

<Toolbar buttonClicked={buttonClicked}/>

在子组件中：

<button value={page} onClick={this.props.buttonClicked}>
  {page}
</button>

请注意，我们只是传递buttonClick()函数的引用，而不是调用。只有在单击按钮时，才会使用事件e调用该函数，然后我们可以访问e.target.value。

Read more about event handling in React here

Answer 2

您需要将this函数的buttonClicked值绑定到父级的this。在你的父母写下这个，

constructor(props) {
 super()

 this.buttonClicked = this.buttonClicked.bind(this)
}

Answer 3

问题不是关于函数，而是使用箭头函数e时未定义的事件onClick={page => this.props.buttonClicked(e.target.value)}

class User extends React.Component {

  buttonClicked(page) {
    this.setState({ page }, () => console.log(`NEW STATE`, this.state));
  }

  render() {
    return (

      <Toolbar buttonClicked={page => this.buttonClicked(page)} />

    )
  }

}

/* CHILD */

class Toolbar extends React.Component {

  render() {
    let page = 3;
    return (

      <button value={page} onClick={e => this.props.buttonClicked(e.target.value)}>
        {page}
      </button>

    )

  }
}
render(<User />, document.getElementById('root'));

<强> CodeSandbox

我将一个函数从父级传递给子级，在onClick上实现它。获取错误：this.props.function（）不是函数

3 个答案: