1

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

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

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

2 回答 2

1

试着这样写：

<form onSubmit={this.handleSubmit}>

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

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

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

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

于 2016-03-04T04:23:25.617 回答
0

按照设计，redux-form不会将 传递event给您的自定义submit函数。

从提交验证示例：

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操作，您可以检查验证信息。

于 2016-08-11T15:35:18.097 回答