created: 2019-06-16T01:23:17.000Z

redux-form (handleSubmit) 入門

redux-form (handleSubmit) 入門

MyFormコンポーネントを定義

自前で実装するフォーム

const MyForm = ({ handleSubmit }) => (
  <form onSubmit={handleSubmit}>
    <div>
      <label htmlFor="firstName">First Name</label>
      <Field component={renderTextField} name="firstName" type="text" />
    </div>
    <button type="submit">Submit</button>
  </form>
);

({ handleSubmit }) => (

  • reduxFormからhandleSubmitというpropsが渡される
    • formがsubmitされたときに実行されるべき関数 (後述)

component={renderTextField}

自前のカスタムコンポーネントを渡すことができる component="input" などと文字列で渡すと普通のデフォルトのinput要素で描画される

reduxForm

  • reduxFormでMyFormをデコレートする
    • これをすることでredux-formの便利関数がMyFormにpropsとして使えるように
    • handleSubmitもこれ経由でpropsに渡ってきている
  • sampleIt はredux-form内でこのフォームを管理するときの名前
    • 複数フォームにまたがった処理を書くときとかに使うのだろうか
const RDForm = reduxForm({ form: 'sampleIt' })(MyForm);

使うところ

onSubmit属性に好きな関数を渡して使う (多くの場合はサーバ側にPOSTしたりとか)

<RDForm onSubmit={console.log} />

ここの RDForm#onSubmit propsとして渡した関数は MyForm#handleSubmit propsとして渡ってくることになる

例だと単純に 組み込みform#onSubmit に渡している

参考