javascript - React - 在组件函数中调用 props 函数

Question

尝试做这样的事情:

//组件一

toggleDropdown() {
  setState({open: !open}
}

render () {
  return (
   ChildComponent toggle={this.toggleDropdown} />
  )
}

然后在我的子组件中，我想在另一个函数中调用 toggleDropdown 函数，如下所示:

// This gets triggered on click.
removeItem() {
  // remove scripts then:
  this.props.toggleDropdown()
}

我以为你可以做这样的事情，但看起来你只能在元素上调用 prop 函数？

Answer 1

您传递给子组件的 Prop 名为 toggle 而不是 toggleDropdown 因此您需要像在 removeItem 组件中那样调用它

// This gets triggered on click.
removeItem() {
  this.props.toggle()
}

您可能需要做的其他事情是使用 bind 或 arrow functions 绑定(bind)您的 removeItem 函数

constructor(props) {
    super(props);
    this.removeItem = this.removeItem.bind(this);
}

或

// This gets triggered on click.
removeItem = () => {
  this.props.toggle()
}