web-dev-qa-db-ja.com

reduxフォームでSubmitを処理する方法

私は初めてredux-formを使用するように取り組んでいます。フォームをレンダリングすることはできますが、送信を処理できません。最終的にはデータをサーバーに送信したいのですが、この時点では、フォームフィールドの値をコンソールログに記録しようとしています。エラーが発生します：

Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

これが私のProfile.jsxファイルです

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {withAuth} from 'react-devise';
import { Field, reduxForm } from 'redux-form';

class Profile extends Component {
  handleSubmit(data) {
     console.log('Submission received!', data);
   }
  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <Field name="firstName" component="input" type="text"/>
        </div>
        <div>
          <label htmlFor="lastName">Last Name</label>
          <Field name="lastName" component="input" type="text"/>
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <Field name="email" component="input" type="email"/>
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

// Decorate the form component
Profile = reduxForm({
  form: 'profile' // a unique name for this form
})(Profile);


const mapStateToProps = state => {
  return {
    currentUser: state.currentUser
  };
};

export default connect(mapStateToProps)(withAuth(Profile));

最終的にAPIに送信できる方法で、送信された値を処理するにはどうすればよいですか？

reactjsreduxreact-reduxredux-form
5
AnApprentice

Redux-FormはコンポーネントをhandleSubmitpropで装飾します。ドキュメントによると、それは：

_<form onSubmit={handleSubmit}>_または_<button onClick={handleSubmit}>_に渡されることを意図した関数。同期と非同期の両方の検証を実行し、フォームが有効な場合は、フォームデータの内容を使用してthis.props.onSubmit(data)を呼び出します。

オプションで、onSubmit関数をhandleSubmitに渡すこともできます。これはonSubmitプロパティの代わりになります。例えば：

したがって、コンポーネントにonSubmitプロパティがない場合は、送信ハンドラーをhandleSubmit関数に「手動で」渡す必要があります。これを試してください：

_<form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>
_

handleSubmitメソッドを同じ名前のRedux-Formから渡されたpropと混同しないでください。

14
Bartek Fryzowicz

（質問の作成者に代わって回答スペースに移動するための解決策を投稿しました）。

作業コード：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {withAuth} from 'react-devise';
import { Field, reduxForm } from 'redux-form';

class Profile extends Component {
  handleSubmit(data) {
     console.log('Submission received!', data);
   }
  render() {
    return (
      <form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <Field name="firstName" component="input" type="text"/>
        </div>
        <div>
          <label htmlFor="lastName">Last Name</label>
          <Field name="lastName" component="input" type="text"/>
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <Field name="email" component="input" type="email"/>
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

// Decorate the form component
Profile = reduxForm({
  form: 'profile' // a unique name for this form
})(Profile);


const mapStateToProps = state => {
  return {
    currentUser: state.currentUser
  };
};

export default connect(mapStateToProps)(withAuth(Profile));
0
halfer