Question

我在下面详细介绍了一个redux-form。根据文档，我应该能够将一个函数传递给handleSubmit并让它被调用，但它似乎没有。

我想阻止默认，然后将表单数据传递给网站其他部分的操作（尚未在下面实现）。但是，我甚至无法获得一个＆＃39; FIRED＆＃39;使用这种方法记录。我错过了什么？如何在这种情况下获得数据？我通常会在函数调用中绑定它，但我甚至无法让它工作......

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {reduxForm} from 'redux-form'
import FlatButton from 'material-ui/lib/flat-button'
import TextField from 'material-ui/lib/text-field'
import Checkbox from 'material-ui/lib/checkbox';
import orgValidation from './orgValidation'

@reduxForm({
  form: 'organization',
  fields: ['longName', 'acronym', 'ieee', 'active'],
  validate: orgValidation,
})
export default class OrganizationForm extends Component {
  static propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired
  };

  handleSubmit = (e) => { //***THIS NEVER GETS CALLED ***
    console.log('FIRED')
    console.log(e)
    console.log(this)
    e.preventDefault()

    console.log(data)
  };

  render() {
    let btnText
    if (this.props.params.orgId) {
      btnText = 'Update'
    }else{
      btnText = 'Create'
    }
    const {
      fields: {longName, acronym, ieee, active}, handleSubmit} = this.props;

    return (
      <form onSubmit={handleSubmit(this.handleSubmit)}>
        <center><h3 style={{fontSize: '24px', fontWeight: '400'}}>{btnText} Organization</h3></center>
        <div>
          <TextField
            floatingLabelText="Organization full name"
            type="text"
            fullWidth={true}
            autoFocus
            errorText={longName.error}
            {...longName}
          />
          <TextField
            floatingLabelText="Organization acronym"
            type="text"
            fullWidth={true}
            errorText={acronym.error}
            {...acronym}
          />
        <div className="row" style={{marginTop: '15px'}}>
          <div className="cute-6-tablet">
          <Checkbox
            label="IEEE Sponsored"
            labelStyle={{color: "gray"}}
            defaultChecked={true}
            checked={ieee.value}
            onCheck={(e, checked) => ieee.onChange(checked)}
          />
      </div>
      <div className="cute-6-tablet">
          <Checkbox
            label="Active"
            labelStyle={{color: "gray"}}
            defaultChecked={true}
            checked={active.value}
            onCheck={(e, checked) => active.onChange(checked)}
          />
      </div>
        </div>
        <div style={{float: 'right'}}>
          <FlatButton
            label="Cancel"
            secondary={true}
          />
          <FlatButton
            type="submit"
            label={btnText}
            primary={true}
          />
        </div>
        </div>
      </form>
    );
  }
}

Answer 1

尝试并按如下方式编写：

<form onSubmit={this.handleSubmit}>

这是将函数引用传递给onSubmit表单prop的正确方法。它应该自动绑定到字段及其值。

进一步说明，当您使用redux-form时，所有内容都将保持在全局状态。当您的表单安装在“组织”时，您可以mapStateToProps并在任何其他组件中包含表单值。

function mapStateToProps(state) {
    return {
        organizationValues: state.form.organization
    }
}

这也意味着您已经使用了连接。

Answer 2

按照设计，redux-form未将event传递给您的自定义submit功能。

From the submit validation example:

const submit = (values, dispatch) => {
  // This would normally be passed as a Component prop from the parent Container
}

class SubmitValidationForm extends Component {
  render() {
    const { fields: { username, password }, error, resetForm, handleSubmit, submitting } = this.props
    return (<form onSubmit={handleSubmit(submit)}> ... </form>);
  }
}

相反，您传递给submit的自定义handleSubmit函数（在表单的onSubmit处理程序内）会收到新的表单值（如果它们有效）。

您的验证工具很可能不接受提交的值，这就是您没有调用自定义提交功能的原因。

您应该在控制台中看到@redux-form/SUBMIT_FAILED操作，您可以检查该操作以获取验证信息。

使用redux-form数据控制提交

2 个答案: