我有以下的React组件:
class Form extends React.Component {
handleSubmit(e) {
e.preventDefault();
let loginInput = ReactDOM.findDOMNode(this.refs.login);
// change Main component's state
this.props.addCard(loginInput.value);
// reset the form
loginInput.value = '';
}
render() {
return(
<form onSubmit={this.handleSubmit}>
<input placeholder="githug login" ref="login" />
<button>Add Login</button>
</form>
);
}
}
正如您所看到的,我希望每当表单被提交时都会调用handleSubmit
函数。 我通过将该函数添加到onSubmit
处理程序中来表示这一点。
该函数在正确的时间被调用。 但是,在该函数内部,this
的值为null
。 这让我感到惊讶,因为我期望this
的值是React组件。 this
为null的事实让我感到惊讶,因为我正在使用与官方React文档建议的非常相似的逻辑/代码。
我希望能得到帮助,找出为什么this
不是预期的React组件,以及如何修复代码使其正常工作。