我正在制作非常简单的反应应用程序。然而,当我尝试通过onChange事件调用父(实际上是祖父母)组件的方法时,我不断得到JavascripExecutor
。
这是触发事件的组件/表单(因此在绑定的父组件上调用方法...是的,我在方法上使用.bound(this),因为我通过props从父组件传递它。)。< / p>
jse.executeScript("window.scrollBy(0,250)", "");
以下是我将该方法作为道具从大多数父(祖父母)组件传递的方式。
Uncaught TypeError: Cannot read property 'props' of undefined
以下是我如何将方法作为父级中的道具传递(方法所有者和方法调用者之间的组件)
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>)
}
}
最后传递给您首先看到的组件(MonthsTable)。无论是否相关,最终(大多数孩子)组件都会显示,这取决于if语句是否正常工作(可能在某种程度上是相关的,我不知道)。
问题是......为什么(setMonth)方法在(handleChangeOnMonth)方法中是“不可见的”。
感谢您的任何建议。
答案 0 :(得分:6)
这里的实际问题是this
函数中未定义handleChangeOnMonth
上下文。这是因为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>)
}
}
答案 1 :(得分:0)
您必须将提供给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>)
}
}