我有以下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的事实让我感到惊讶,因为我使用的逻辑/代码与official React documentation非常相似。
我很感激你能帮助我弄清楚为什么this
不是React组件,以及如何修复代码使其成为React组件。
7条答案
按热度按时间qc6wkl3g1#
在
React
和ES2015 classes
一起使用时,应将this
设置为事件处理程序Example
No Autobinding
方法遵循与常规ES6类相同的语义,这意味着它们不会自动将this绑定到示例。你必须显式地使用.bind(this)或箭头函数=>。
s4chpxco2#
您需要将
button
或input
与type="submit"
一起使用或者
a0zr77ik3#
一个明显的信息:别忘了在
<form>
中包含您的按钮。我被卡住了一段时间,直到我发现我把我的提交按钮放在了我的表单外面,就像这样:因此onSubmit事件没有被调用,并且永远不会被调用。
xfb7svmp4#
对我来说,这是因为表单没有设置
action
属性。xbp102n05#
我遇到了这种情况,提交处理程序只是将一个新位置推到历史记录中。提交我的表单会刷新页面,把我留在旧的位置。我在提交处理程序的开头使用
event.preventDefault()
修复了这个问题。qv7cva1a6#
如果你使用的是功能组件,那么确保你的按钮的类型是“Submit”而不是“button”。这就是我做错的!
evrscar27#
正如@Bernat在comment中提到的那样。
额外信息:以编程方式提交表单不会调用
onSubmit
回调。用type="submit"
添加button
成功。这意味着这段代码不会触发onSubmit函数:
而这段代码将触发
onSubmit