問題タブ [redux-form]

この一般的なアプローチを使用できる 2 つの通常の入力を含むフォームがあります。

また、フォームにdraftJSエディターがあります。送信時にdraftJSコンテンツを（経由でdraft-js-export-html）HTMLに変換し、コンポーネントのマウントプロセスでhtmlをロードする必要があります。それをredux-formと組み合わせる方法は？

redux-formmapStateToPropsで他の react-redux パラメータを設定できますか。v6

このようにredux-formv5 ~> http://i.stack.imgur.com/nSZKM.jpg

redux-form を使用してフォーム コンポーネントを Redux に接続するためのデコレータを作成します。config パラメーターと、オプションで mapStateToProps、mapDispatchToProps、mergeProps、およびオプション パラメーターを受け取ります。これらのパラメーターは、react-redux の connect() 関数によって取得されるパラメーターに正確に対応し、フォーム コンポーネントを Redux の他の状態に接続できるようにします。

.

例えば：

redux-form-material-uiリポジトリの公式の例に基づいています。私のコードは次のようになります。

focusエラーのある最初のフィールドのみにwithRefプロパティを渡しています。このフィールドでは、常にエラーが発生します。Uncaught (in promise) Error: If you want to access getRenderedComponent(), you must specify a withRef prop to Field(…)

私は両方を見ることができ、にref渡さwithRefれましたField。次に、コンポーネントでref="wrappedInstance"私はまだ見ることができますwithRef="true"。深くは渡されません。

それを解決する方法を考えていただければ幸いです。

小道具として渡されたinitialValuesを使用してReduxフォームをロードしています。ただし、フォーム名に合うようにデータを再フォーマットする必要があります。たとえば、props として渡された initialValues のデータが {name: 'John', age: '32'} の場合、それを {user に変換したい: {名前: 'ジョン', 年齢: '32'}}. どうやってそれを達成しますか？これを達成するためにレデューサーを作成しますか?そうであれば、コンポーネントのロード時にどのように呼び出すのですか?

ありがとう。

material-ui のTextfieldでredux-formを使用してフォームを作成し、メールを送信しました。1 つのことを除いて、すべてがうまく機能しています。TextField を初めてクリックすると、ウィンドウが上にスクロールします。場合によっては、フォーカスが TextField にとどまります。その後、正常に動作しています

何が起こっているかの例を次に示します。

私のフォーム：

フォームを使用するコンポーネント:

インポートされたテーマには、material-ui スタイルに使用される色が含まれています。また、TextFields の onFocus および onBlur props が機能しないこともわかりました。単純にテキストをログに記録しようとしましたが、うまくいきません。

さらに奇妙なのは、この emailForm を使用するのは初めてではないということです。別のサイトで使用しましたが、問題なく動作していました。

なぜそれが起こっているのか誰にも分かりますか？

redux-form 5.3.1 を使用すると、アクション クリエーターにアクセスできました。しかし、Material-UI が必要だったので、6.0.0-rc.3 に更新しました。

5.3.1 から 6.0.0 への変更:

• render() からフィールドを削除:

const { handleSubmit, fields: { email, password, passwordConfirm }} = this.props;

• 入力の下からエラー検証を削除しました:

{email.touched && email.error && <div className="error">{email.error}</div>}

• エクスポートのデフォルトからフィールド配列を削除しました:

export default reduxForm({ form: 'signup', fields: ['email', 'password', 'passwordConfirm'], validate }, mapStateToProps, actions)(Signup);

• Material-UI コンポーネントの追加されたラッパー:

import { renderTextField, renderCheckbox, renderSelectField, renderDatePicker } from '../material-ui-wrapper';

コード：

1 - console.log(this.props) は作成者のアクションをログに記録しません- signupUser 関数をログに記録する必要があります

編集

かわった：

export default reduxForm({ form: 'signup', validate }, mapStateToProps, actions)(Signup);

に：

Signup = reduxForm({ form: 'signup', validate })(Signup); export default Signup = connect(mapStateToProps, actions)(Signup);

うまくいきました。これを修正する最も正しい方法はありますか？