在React中向孙子传递带有参数的函数时出错

Question

我有以下代码：我的主要组件是这样的：

class Layout extends React.Component {
  constructor(){
    super()
    this.state={
      searchValue: ''
    }
  }
  getSearchValue(searchValue){
    this.setState({searchValue})
  }
  ...
   return 
     <Filter
       getSearchValue={this.getSearchValue.bind(this)}
     />
  ...
} 

然后我有个孩子，叫做Filter：

class Filter extends React.Component {
  ...
  return
     <SearchBar
        getSearchValue={this.props.getSearchValue}
     />
  ...
}

最后是搜索组件本身：

class SearchBar extends React.Component {

   handleEvent(e){
     this.props.getSearchValue(e.target.value)
   }
   ...
   return
      <input onChange={this.handleEvent.bind(this)}/>

}

现在，我很确定我有这样的东西，但后来我搞砸了，并试图回来，但现在我收到一条错误信息：

未捕获的TypeError：this.props.getSearchValue不是函数

我的任何绑定都是错的吗？ 我试了好几次。

如果我放置一个console.log（'Hi'）并从Layout中的getSearchValue中删除this.setState（），并且我没有将SearchBar中的变量传递给this.props.getSearchValue，我将消息传递给控制台。 所以函数有效，但只是没有参数。 为什么？

Answer 1

以下声明中的编码是正确的，除了额外的）：

 <Filter
   getSearchValue={this.getSearchValue.bind(this))}
 />

否则，代码的其他区域可能存在问题。