6

いくつかの問題を解決した後、DatePicker データをフォームに送信することに固執しました。私のフォームでは、主に redux-form-material-ui の要素を使用していますが、DatePicker はその一部ではありません。

redux-form で DatePicker コンポーネントを作成する 2 つの方法を見つけました。

<Field
  name="startDate"
  autoOk={true}
  floatingLabelText="startDate"
  component={(startDate) => {
    return <DatePicker {...startDate} />;
  }}
  onChange={(event, date) => {console.log(date);}}
/>

と

<DatePicker
  name="startDate"
  autoOk={true}
  floatingLabelText="startDate"
  onChange={(event, date) => {console.log(date)}} />

問題は、フォーム データを更新する方法がわからないことです。最初の例では、選択された日付がテキスト フィールドに表示されません。form.myForm日付フィールドをアクティブにしたことを店舗で確認できますが、ピックされた日付で更新されることはありません。2 番目はピッキング日を示していますが、form.myFormオブジェクトの一部ではありません...

インターネットでいくつかの例を見つけました (例: https://github.com/erikras/redux-form/issues/364 ) がfields、props にオブジェクトがないため、 を呼び出すことができませんthis.props.fields.startDate.onChange。

実際の例があまりないため、redux-form と material-ui を使用する良い方法が何であるかはわかりません。私は使用するすべてのコンポーネントにラッパーを作成することを考え始めました。これは、フォームに加えられた変更でストアを更新する onChange メソッドを提供します。しかし、その後、redux-form はもう必要ないので、使用できる他の解決策が必要だと思います。

"react": "15.1.0",
"react-tap-event-plugin": "1.0.0",
"redux": "3.0.5",
"redux-form": "^6.0.0-alpha.4",
"redux-form-material-ui": "^2.0.0",
4

4 に答える 4

5 
import React from 'react';
import DatePicker from 'material-ui/DatePicker';

export default ({ input, label, meta: { touched, error }, ...custom }) => {
    return (
        <DatePicker
          onChange={(e, val) => {return input.onChange(val)}}
          {...custom}
          value={input.value}
        />
);
}

これを file のように考えるとrenderDatePicker.js、使用法は次のようになります。

<Field name="created_on" component={RenderDatePicker} floatingLabelText="Created Date"/>

はどこFieldからインポートされますかredux-form。自動入力するには、忘れずに入力{created_on: new Date('someiso8601')}しthis.props.initializeてください。

于 2016-09-16T10:10:29.233 に答える