Javascript 反应处理表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38262148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React handle form submit
提问by Matthias
I'm trying to create a form in React/Redux. For now I just want the form to trigger my function handleSubmit when the form is submitted. However at the moment it looks like the function is triggered instantly on page load ...
我正在尝试在 React/Redux 中创建一个表单。现在我只希望表单在提交表单时触发我的函数 handleSubmit。但是目前看起来该功能在页面加载时立即触发......
export default class AssetsAdd extends React.Component {
componentDidMount() {
console.log(this)
}
handleSubmit(event) {
if (this.refs.titleInput !== '') {
event.preventDefault();
var asset = {
date: '',
title : this.refs.titleInput.value,
id : '',
type: this.refs.typeInput.value
}
return this.props.dispatch(addAsset(asset))
}
}
render() {
return (
<div>
<Row>
<Portlet title='New Asset' form>
<Form horizontal onSubmit={this.handleSubmit}>
<FormGroup>
<Label text='Title' size='3' />
<Input ref="titleInput" placeholder='Enter asset title' size='4'/>
</FormGroup>
<FormGroup>
<Label text='Type' size='3' />
<Input ref="typeInput" placeholder='Enter asset type' size='4'/>
</FormGroup>
<FormGroup>
<Label text='Description' size='3' />
<Input ref="descriptionInput" placeholder='Enter asset description' size='4'/>
</FormGroup>
<FormGroup>
<Label text='Documentation' size='3' />
<Input ref="documentationInput" placeholder='Enter documentation URL' size='4'/>
</FormGroup>
<FormActionBar>
<SubmitButton value='Submit'/>
<CancelButton value='Cancel'/>
</FormActionBar>
</Form>
</Portlet>
</Row>
</div>
)
}
}
function mapStateToProps(state) {
return {
assets: state.assets
};
}
export const AssetAddContainer = connect(mapStateToProps)(AssetsAdd);
I know the rest of the code isn't all correct yet but my main concern now is just getting the onSubmit action triggered at the right moment.
我知道其余的代码还不完全正确，但我现在主要关心的是在正确的时刻触发 onSubmit 操作。
Thanks in advance!
提前致谢！
回答by U r s u s
Looks like you're not binding your handleSubmit.
看起来你没有绑定你的handleSubmit.
From the docs:
从文档：
Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance.
方法遵循与常规 ES6 类相同的语义，这意味着它们不会自动将 this 绑定到实例。
You've got three options
你有三个选择
Add a constructor and do the binding there (recommended):
this.handleSubmit = this.handleSubmit.bind(this);Bind directly:
onSubmit={this.handleSubmit.bind(this)}Use arrow
=>functionsonSubmit={() => this.handleSubmit}
添加一个构造函数并在那里进行绑定（推荐）：
this.handleSubmit = this.handleSubmit.bind(this);直接绑定：
onSubmit={this.handleSubmit.bind(this)}使用箭头
=>函数onSubmit={() => this.handleSubmit}
回答by Raulucco
You need to pass the handleSubmitas a prop
你需要通过handleSubmit作为道具
<SubmitButton value='Submit' onSubmit={this.handleSubmit.bind(this)}/>
Then assign that prop to the button on the render function of the SubmmitButton component.
然后将该道具分配给 SubmmitButton 组件的渲染功能上的按钮。
// submmit button component @render method
<button onClick={this.props.onSubmit} >Submit</button>
