web-dev-qa-db-ja.com

Redux Formを使用したフォーム入力が更新されない

キーを押しても入力フィールドが更新されない：

import React, { Component, PropTypes } from 'react';

import { Field, reduxForm } from 'redux-form';

class CitySelector extends Component {
  render() {
    const { isFetching, pristine, submitting, handleSubmit } = this.props;

    return (
      <form className="form-horizontal col-xs-offset-1" onSubmit={handleSubmit(this.fetchWeather)}>
        <div className="form-group">
          <div className="col-md-4 col-xs-4">
            <Field name="city"
                   component={city =>
                     <input type="text" className="form-control" {...city.input} placeholder="enter a city for a 5 day forecast"/>
                   }
            />
          </div>
          <div className="col-md-3 col-xs-3">
            <button type="submit" className="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    );
  }
}

export default reduxForm({
  form: 'cityForm'
})(CitySelector);

テキスト入力にonChangeハンドラーを提供する必要がありますか？

reactjsreduxredux-form
17
dagda1

私は同じ問題を抱えていて、私の間違いは非常に簡単でした。

私が持っていたものは次のとおりです。

import { combineReducers } from 'redux';
import { reducer as forms } from 'redux-form';

import otherReducer from './otherReducer';

export default combineReducers({ otherReducer, forms });

Redux-form reducerをformsとしてインポートし、ES6 Objectプロパティ値の短縮形を使用して、それをそのまま（otherReducerで行ったように）combeReducersに渡していることに注意してください。

問題は、keyを渡すために使用されるredux-form reducerがcomposeReducersに[〜＃〜] must [〜＃〜]という名前が付けられることですformなので、次のように変更する必要があります。

export default combineReducers({ customer, form: forms });

または

import { reducer as form } from 'redux-form';
export default combineReducers({ otherReducer, form });

これが誰かに役立つことを願っています...

66
rafaelbiten

次の代わりに不変のデータ構造を使用している場合：

import { reduxForm } from 'redux-form';

これを使って：

import { reduxForm } from 'redux-form/immutable';

詳細はこちらをご覧ください http://redux-form.com/6.7.0/examples/immutable/

25
Aref Aslani

フォームが送信されず、検証機能も実行されなかったことを除いて、この質問と同様の問題が発生していました。

これは次の理由によるものです。

inputから他の何かに変更したところ、redux-formが完全に壊れました

const TextInput = ({
    input,                                                 <--- DO NOT CHANGE THIS
    placeholder,
    type,
    meta: { touched, error, warning }
  }) => {
    return (
      <div className="row-md">
          <input
            placeholder={placeholder}
            type={type}
            className="form-text-input primary-border"
            {...input}                                     <--- OR THIS
          />
          {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
      </div>
    )
}

誰かがそれを勉強したい場合の私の入力の残りは次のとおりです。

<Field
  component={TextInput}
  type="tel"
  name="person_tel"
  placeholder="Mobile Phone Number"
  value={this.props.person_tel}
  onChange={(value) => this.props.updateField({ prop: 'person_tel', value })}
/>
1
agm1984

Fieldにカスタム入力コンポーネントを提供する場合、onChange prop内でコンポーネントに渡されるinputを呼び出す必要があります。実際、あなたは_city.input_を広めることでほとんどそれを正しく理解しましたが、落とし穴があります。

ステートレスコンポーネント（または任意の関数）insiderender()メソッドを定義すると、レンダリングのたびに再作成されます。また、このステートレスコンポーネントは、componentにプロップ（Field）として渡されるため、Fieldが各再作成後に強制的にレンダリングされます。したがって、入力はCitySelectorコンポーネントがレンダリングされるたびにフォーカスを失うため、キーの押下はキャプチャされません。

ステートレスコンポーネントを別の定義に抽出する必要があります。

_const myInput = ({ input }) => (
  <input type="text" className="form-control" {...input} placeholder="enter a city for a 5 day forecast" />
);

class CitySelector extends Component {
  render() {
    const { isFetching, pristine, submitting, handleSubmit } = this.props;

    return (
      <form className="form-horizontal col-xs-offset-1" onSubmit={handleSubmit(this.fetchWeather)}>
        <div className="form-group">
          <div className="col-md-4 col-xs-4">
            <Field name="city" component={myInput} />
          </div>
          <div className="col-md-3 col-xs-3">
            <button type="submit" className="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    );
  }
}
_

また、コードが読みやすくなります。

Redux Formの official docs で、この問題に関する詳細情報を見つけることができます。おそらく自分で作成せずにデフォルトのinputを使用できることに注意してください。 simple form example を見てください。

1
Konstantin Grushetsky

私が見つけた/私の問題は私の

form: formReducer

rootReducerにはありませんでした。

formReducerが一番上になければなりません。私の場合：

const rootReducer = combineReducers({
   general: generalReducer,
   data: combineReducers({
       user:userReducer,
       todoReducer
   }),
       form: formReducer
   });
0
user3690341