javascript React 函数说“不是函数”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51066111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React function says "is not a function"
提问by justDan
I'm working on breaking up a little react app into smaller components. Before separating code everything worked as planned. I now am trying to call a function onChangethat calls a function and then that calls a function as a prop. I am binding the function like this this.updateInput = this.updateInput.bind(this);but I still cannot figure out what I am missing. I tried a recent post on here (React : Pass function to child component) but the error still remains. Any help is great.
我正在努力将一个小 React 应用程序分解成更小的组件。在分离代码之前，一切都按计划进行。我现在试图调用一个函数onChange，该函数调用一个函数，然后调用一个函数作为prop. 我正在像这样绑定函数，this.updateInput = this.updateInput.bind(this);但我仍然无法弄清楚我缺少什么。我在这里尝试了最近的一篇文章（React : Pass function to child component），但错误仍然存在。任何帮助都很棒。
Here is the code I am working with:
这是我正在使用的代码：
class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {
city: '',
details: []
};
this.updateInputValue = this.updateInputValue.bind(this);
}
updateInputValue(e) {
this.setState({
city: e.target.value
});
console.log('hit')
}
render() {
return (
<div className={style.container + ' ' + style.bodyText}>
<WeatherForm
updateInput={this.updateInputValue}
/>
</div>
);
}
}
class WeatherForm extends React.Component {
constructor(props) {
super(props);
this.updateInput = this.updateInput.bind(this);
}
updateInput(e) {
this.props.updateInputValue(e);
}
render() {
return (
<div className={style.weatherForm}>
<form action='/' method='GET'>
<input ref='city' value={this.props.inputValue} onChange={e => this.updateInput(e)} type='text' placeholder='Search city' />
</form>
</div>
);
}
}
So when I type one character in the input, instead of the console logging hit, it says Uncaught TypeError: this.props.updateInputValue is not a function. What am I missing here?
因此，当我在输入中键入一个字符而不是控制台日志时hit，它会显示Uncaught TypeError: this.props.updateInputValue is not a function. 我在这里错过了什么？
采纳答案by degr
It should be
它应该是
<WeatherForm
updateInputValue={this.updateInputValue}
/>
回答by mxdi9i7
Your child component only has the prop of updateInputas a method and you're calling this.props.updateInputValue()in child component. Try to call them the same names.
您的子组件只有updateInput作为方法的道具，并且您正在调用this.props.updateInputValue()子组件。尝试给它们起相同的名字。
You're also calling this.props.inputValuein the child component when you're not passing inputValueinto your child component as a props.
this.props.inputValue当您没有将inputValue子组件作为道具传入时，您也在调用子组件。
What I would do to simplify the code and possible avoid mistakes like this in the future is to directly call this.props.updateInputValuein onChange event like this：onChange={e => this.props.updateInputValue(e)}You then save the work of binding another component method in constructor. It'll also make your unit testing easier but that's another discussion.
为了简化代码，避免以后出现这样的错误，我要做的就是直接this.props.updateInputValue像这样直接调用onChange事件：onChange={e => this.props.updateInputValue(e)}然后就省去了在构造函数中绑定另一个组件方法的工作。它还将使您的单元测试更容易，但这是另一个讨论。
