Делать частичный сброс полей формы - PullRequest
Новая
       47

Делать частичный сброс полей формы

0 голосов
/ 10 января 2019

Я реализовал форму, используя библиотеку 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);

То, что я ищу для любого другого подхода, использующего библиотеку избыточных форм.

Заранее большое спасибо.

1 Ответ

0 голосов
/ 10 января 2019

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

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)),
});

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

...