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綁定removeItem arrow functions

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

要么

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

Answer 2

您只需要調用toggle而不是toggleDropdown 。

this.props.toggle();

Answer 3

子組件的toggleDropdown命名為toggle ，而toggleDropdown屬於父組件。

這應該在子組件中起作用：

removeItem() {
    this.props.toggle();
}