Сделайте частичный сброс полей формы редукса

Я реализовал форму, используя библиотеку redux-form. Форма имеет 3 поля.

  1. Имя (тип ввода)
  2. Фамилия (тип ввода)
  3. Любимый цвет (выберите/раскрывающийся список)

Что я пытаюсь реализовать, когда пользователь меняет свой любимый цвет (раскрывающийся список). Очищается только поле «Фамилия», а не какие-либо другие поля формы (т. е. поля «Имя» и «Любимый цвет» должны оставаться без изменений).

Я уже реализовал данное требование, пример кода приведен ниже.

Сохранить конфигурацию файла


    const reducer = combineReducers({
      form: reduxFormReducer.plugin({
        mySimpleForm: (state, action) => {
          if(action.type === "@@redux-form/CHANGE" && action.meta.form === "mySimpleForm" && action.meta.field === "favoriteColor") {
            const newState = {...state};
            delete(newState.values.lastName);
            return newState;
          }
          return state;
        }
      })
    });
    const store = createStore(reducer);

Код отображения формы

    const SimpleForm = props => {
        const { handleSubmit, pristine, reset, submitting } = props;

        return (
          <form onSubmit={handleSubmit}>
            <div>
              <label>First Name</label>
              <div>
                <Field
                  name="firstName"
                  component="input"
                  type="text"
                  placeholder="First Name"
                />
              </div>
            </div>

            <div>
              <label>Last Name</label>
              <div>
                <Field
                  name="lastName"
                  component="input"
                  type="text"
                  placeholder="Last Name"
                />
              </div>
            </div>

            <div>
              <label>Favorite Color</label>
              <div>
                <Field name="favoriteColor" component="select">
                  <option />
                  <option value="ff0000">Red</option>
                  <option value="00ff00">Green</option>
                  <option value="0000ff">Blue</option>
                </Field>
              </div>
            </div>

            <div>
              <button type="submit" disabled={pristine || submitting}>Submit</button>
              <button type="button" disabled={pristine || submitting} onClick={reset}>
                Clear Values
              </button>
            </div>
          </form>
        );
      };

      export default reduxForm({
        form: 'mySimpleForm', // a unique identifier for this form
      })(SimpleForm);

Что я ищу для любого другого подхода с использованием библиотеки форм redux.

Спасибо заранее.


reactjs react-redux redux-form react-redux-form
person Prakash Gupta    schedule 10.01.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете использовать функцию change из редукс-формы.

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

...
handlePartialUpdate = () => {
  this.props.updateField('formName', 'lastName', '');
}
render()
  {
    return(
      <form>Your form here</form>
    );
  }    
...

const mapDispatchToProps = dispatch => ({
  updateField: (form, field, newValue) => dispatch(change(form, field, newValue)),
});

Ссылка здесь.

person Sivadass N    schedule 10.01.2019
comment
Это был хороший ответ для меня. Я пытался сделать updateField('formName', 'lastName', null) и updateField('formName', 'lastName', undefined), и это не сработало. Установка его в пустую строку удалила значение из состояния по желанию (поэтому оно было сброшено на undefined). Благодарю вас! - person TPHughes; 30.05.2019