[英]Uncaught TypeError: Cannot read property 'props' of null in React
This is my child component that needs to pass data up to its parent. 这是我的子组件,需要将数据传递给它的父组件。
class Sidebar extends React.Component {
getUserInput(event){
event.preventDefault();
let value = document.getElementById('input-button').value;
console.log(value);
this.props.handleSubmit(value);
}
render() {
return (
<div>
<input type="text" id="input-button" placeholder="YGUID" />
<button type="button" className="btn btn-info btn-icons" onClick={this.getUserInput} />
</div>
);
}
}
Sidebar.propTypes = {
handleSubmit: React.PropTypes.func
};
This is where the parent is calling handleSubmit. 父级在此处调用handleSubmit。
......
handleSubmit(data){
console.log(data);
}
render(){
return(
<div className="col-md-2 left-pane">
<Sidebar handleSubmit= {this.handleSubmit}/>
</div>
);
}
I get the following error. 我收到以下错误。
Uncaught TypeError: Cannot read property 'props' of null
What am I doing wrong here. 我在这里做错了。
this.getUserInput
function passed to the Sidebar
props is not bound to the correct context ( this
) when it is called. 传递到
Sidebar
道具的this.getUserInput
函数在调用时未绑定到正确的上下文( this
)。 You can for example bind it: 您可以例如将其绑定 :
<Sidebar handleSubmit={this.handleSubmit.bind(this)}/>
There are also other options how to sovle this. 还有其他方法可以解决这个问题。 For example using arrow functions which has lexical
this
, binding methods in constructor or using class properties to define methods with arrow functions (ES7). 例如,使用具有词法
this
箭头函数,构造函数中的绑定方法或使用类属性来定义带有箭头函数的方法(ES7)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.