Question

我已经使用redux-form库实现了一个表单。表单有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表单库的其他任何方法。

非常感谢。

Answer 1

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

参考链接here。

对Redux表单字段进行部分重置

1 个答案: