控制提交 redux-form 的数据

Question

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

我想阻止默认，然后将表单数据传递给网站另一部分的操作（下面尚未实现）。但是，我什至似乎无法获得 'FIRED' 的控制台日志来使用这种方法进行记录。我错过了什么？以及这种场景下如何获取数据？我通常会在函数调用中绑定到它，但我什至无法让它工作...

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 表单道具的正确方法。它应该自动绑定到字段及其值。

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

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

这也意味着您已经使用过connect。

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>);
  }
}

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

很有可能，您的验证器不接受提交的值，，这就是为什么您的自定义提交函数没有被调用的原因。

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

控制提交 redux-form 的数据

Controlling submit with data for redux-form

reactjs

redux

redux-form