React.js-无法读取未定义的属性
我正在制作一个非常简单的 React 应用。然而，当我尝试通过 onChange 事件调用父组件（实际上是祖父组件）的方法时，我不断收到
Uncaught TypeError: Cannot read property 'props' of undefined
。
这是触发事件的组件/表单（因此调用绑定父组件上的方法...是的，我在方法上使用了 .bound(this)，因为我通过 props 将其从父组件传递下来。）。
class MonthsTable extends Component {
handleChangeOnMonth(e){
this.props.setMonth(e.target.id, e.target.value); // here the method is not found, causing error.
}
render(){
console.log(this.props.setMonth) // here the method is present alright
return (<form>
{this.props.months.map((e, i) =>
<input
type='number'
id={i}
key={i} // yes I know, bad habit, but in this case it doesn't matter
value={this.props.months[i]}
onChange={this.handleChangeOnMonth} />)}
</form>)
}
}
这是我如何将方法作为 props 从大多数父组件（祖父组件）传递。
<Months setMonth={this.setMonth.bind(this)} />
这是我如何在父组件（方法所有者和方法调用者之间的组件）中将方法作为 props 传递
<MonthsTable setMonth={this.props.setMonth} />
最后传递给您首先看到的组件（MonthsTable）。无论它是否相关，最终（大多数子）组件的显示取决于 if 语句，该语句可以正常工作（可能以某种方式相关，我不知道）。
问题是......为什么（setMonth）方法在（handleChangeOnMonth）方法中“不可见”。
此处的实际问题是
handleChangeOnMonth
函数中未定义
this
上下文。这是由于 javascript 处理函数上下文的方式造成的，基本上，在调用函数时，如果您不是直接从对象调用它们，并且它们未绑定，则它们将没有定义的上下文，并且由于您将函数作为参数传递给输入组件，因此它会丢失上下文。
解决此问题的最简单方法是绑定函数，我建议您在构造函数中绑定函数，如下所示：
class MonthsTable extends Component {
constructor(props, context){
super(props, context);
this.handleChangeOnMonth = this.handleChangeOnMonth.bind(this);
}
handleChangeOnMonth(e){
this.props.setMonth(e.target.id, e.target.value);
}
render(){
return (<form>
{this.props.months.map((e, i) =>
<input
type='number'
id={i}
key={i}
value={this.props.months[i]}
onChange={this.handleChangeOnMonth} />)}
</form>)
}
}
或者，如果您使用装饰器，则可以使用
core-decorators
包以更优雅的方式执行此操作：
import {autobind} from "core-decorators"
@autobind
class MonthsTable extends Component {
handleChangeOnMonth(e){
this.props.setMonth(e.target.id, e.target.value);
}
render(){
return (<form>
{this.props.months.map((e, i) =>
<input
type='number'
id={i}
key={i}
value={this.props.months[i]}
onChange={this.handleChangeOnMonth} />)}
</form>)
}
}
您必须将提供给 onChange 的函数绑定到当前上下文。您可以在类的构造函数中绑定它，也可以将其直接绑定到 onChange()，但这不是好的做法。
class MonthsTable extends Component {
constructor(props){
super(props);
this.handleChangeOnMonth = this.handleChangeOnMonth.bind(this);
}
handleChangeOnMonth(e){
this.props.setMonth(e.target.id, e.target.value); // here the method is not found, causing error.
}
render(){
console.log(this.props.setMonth) // here the method is present alright
return (<form>
{this.props.months.map((e, i) =>
<input
type='number'
id={i}
key={i} // yes I know, bad habit, but in this case it doesn't matter
value={this.props.months[i]}
onChange={this.handleChangeOnMonth.bind(this)} />)}
</form>)
}
}