部分重置 redux 表单字段

Question

我已经使用 redux-form 库实现了一个表单。表单有 3 个字段。

名字（输入类型）
姓氏（输入类型）
最喜欢的颜色（select/drop-down 类型）

当用户更改其最喜欢的颜色（下拉菜单）时，我试图实现什么。只有姓氏字段会被清除，表单的任何其他字段都不会（即名字和最喜欢的颜色字段应保持不变）。

我已经实现了给定的要求，下面分享了示例代码。

存储文件配置


    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 表单库的任何其他方法。

非常感谢。

Answer 1

您可以使用 redux-form 中的 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)),
});

引用 link here.

部分重置 redux 表单字段

Do partial reset of redux form fields

reactjs

redux-form

react-redux

react-redux-form