[英]Error on passing down function with argument to grandchild in React
I have the following code: My main component is something like this: 我有以下代码:我的主要组件是这样的:
class Layout extends React.Component {
constructor(){
super()
this.state={
searchValue: ''
}
}
getSearchValue(searchValue){
this.setState({searchValue})
}
...
return
<Filter
getSearchValue={this.getSearchValue.bind(this)}
/>
...
}
Then I have a child, called Filter: 然后我有个孩子,叫做Filter:
class Filter extends React.Component {
...
return
<SearchBar
getSearchValue={this.props.getSearchValue}
/>
...
}
And finally the Search component itself: 最后是搜索组件本身:
class SearchBar extends React.Component {
handleEvent(e){
this.props.getSearchValue(e.target.value)
}
...
return
<input onChange={this.handleEvent.bind(this)}/>
}
Now, I am pretty sure I had something like this but then I messed it up, and tried to do it back, but now I get an error message: 现在,我很确定我有这样的东西,但后来我搞砸了,并试图回来,但现在我收到一条错误信息:
Uncaught TypeError: this.props.getSearchValue is not a function 未捕获的TypeError:this.props.getSearchValue不是函数
Are any of my bindings wrong? 我的任何绑定都是错的吗? I tried several times.
我试了好几次。
If I put a console.log('Hi') and delete the this.setState() from my getSearchValue in Layout, and I do not pass a variable in SearchBar to this.props.getSearchValue, I get the message to the console. 如果我放置一个console.log('Hi')并从Layout中的getSearchValue中删除this.setState(),并且我没有将SearchBar中的变量传递给this.props.getSearchValue,我将消息传递给控制台。 So the function works, but only without arguments.
所以函数有效,但只是没有参数。 Why?
为什么?
The coding is correct, except the extra ) in the below statement: 以下声明中的编码是正确的,除了额外的):
<Filter
getSearchValue={this.getSearchValue.bind(this))}
/>
Otherwise, there may be issue in other area of the codes. 否则,代码的其他区域可能存在问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.