1

以下に詳述するredux-formがあります。ドキュメントによると、関数を handleSubmit に渡して呼び出すことができるはずですが、そうではないようです。

Default を防止したいのですが、フォームデータをサイトの別の部分からのアクションに渡します (以下はまだ実装していません)。ただし、このアプローチを使用してログに記録する「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>
    );
  }
}
4

2 に答える 2

1

次のように書いてみてください。

<form onSubmit={this.handleSubmit}>

これは、関数参照を onSubmit フォーム prop に渡す適切な方法です。フィールドとその値に自動的にバインドする必要があります。

さらに注意すると、redux-form を使用しているため、すべてがグローバル状態に保持されます。フォームが「組織」にマウントされているため、mapStateToProps を使用して、フォームの値を他のコンポーネントに含めることができます。

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

これは、connect を使用したことも意味します。

于 2016-03-04T04:23:25.617 に答える
0

設計上、カスタム関数に をredux-form渡しません。eventsubmit

送信検証の例から:

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に渡すカスタム関数は、新しいフォームの値が有効な場合に受け取ります。handleSubmitonSubmit

おそらく、バリデーターが送信された値を受け入れていないため、カスタム送信関数が呼び出されていません。

コンソールに@redux-form/SUBMIT_FAILEDアクションが表示され、検証情報を調べることができます。

于 2016-08-11T15:35:18.097 に答える