我正在尝试在 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);
我知道代码的其余部分尚不完全正确,但我现在主要关心的是在正确的时刻触发 onSubmit 操作。
提前致谢!
看起来你没有绑定你的handleSubmit
.
From the docs https://facebook.github.io/react/docs/handling-events.html:
方法遵循与常规 ES6 类相同的语义,这意味着
他们不会自动将 this 绑定到实例。
你有三个选择
-
添加构造函数并在那里进行绑定(推荐):
this.handleSubmit = this.handleSubmit.bind(this);
-
直接绑定:
onSubmit={this.handleSubmit.bind(this)}
-
使用箭头=>
功能
onSubmit={() => this.handleSubmit}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)