反应处理表单提交 [英] React handle form submit

问题描述

我正在尝试在 React/Redux 中创建一个表单.现在我只希望表单在提交表单时触发我的函数 handleSubmit.但是目前看起来该功能在页面加载时立即触发......

导出默认类 AssetsAdd extends React.Component {componentDidMount() {控制台日志(这个)}处理提交(事件){如果 (this.refs.titleInput !== '') {event.preventDefault();无功资产 = {日期: ''，标题:this.refs.titleInput.value，ID : ''，类型:this.refs.typeInput.value}返回 this.props.dispatch(addAsset(asset))}}使成为() {返回 (<div><行><Portlet title='新资产'表单><表单水平 onSubmit={this.handleSubmit}><表单组><Label text='Title' size='3'/><Input ref="titleInput" placeholder='输入资产标题' size='4'/></FormGroup><表单组><Label text='Type' size='3'/><Input ref="typeInput" placeholder='输入资产类型' size='4'/></FormGroup><表单组><Label text='Description' size='3'/><Input ref="descriptionInput" placeholder='输入资产描述' size='4'/></FormGroup><表单组><Label text='Documentation' size='3'/><Input ref="documentationInput" placeholder='输入文档 URL' size='4'/></FormGroup><FormActionBar><提交按钮值='提交'/><CancelButton value='Cancel'/></FormActionBar></表格></Portlet></行>

)}}函数 mapStateToProps(state) {返回 {资产:state.assets};}export const AssetAddContainer = connect(mapStateToProps)(AssetsAdd);

我知道其余的代码还不完全正确，但我现在主要关心的是在正确的时刻触发 onSubmit 操作.

提前致谢！

解决方案

看起来你没有绑定你的 handleSubmit.

来自文档:

<块引用>

方法遵循与常规 ES6 类相同的语义，这意味着他们不会自动将其绑定到实例.

你有三个选择

1. 添加一个构造函数并在那里进行绑定(推荐):

   this.handleSubmit = this.handleSubmit.bind(this);

2. 直接绑定:

   onSubmit={this.handleSubmit.bind(this)}

3. 使用箭头=>函数

   onSubmit={() =>this.handleSubmit}

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 ...

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.

Thanks in advance!

解决方案

Looks like you're not binding your handleSubmit.

From the docs:

Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance.

You've got three options

1. Add a constructor and do the binding there (recommended):

   this.handleSubmit = this.handleSubmit.bind(this);

2. Bind directly:

   onSubmit={this.handleSubmit.bind(this)}

3. Use arrow => functions

   onSubmit={() => this.handleSubmit}

这篇关于反应处理表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！