使用 redux-form，如何从另一个组件重置表单值？

Question

这是我的问题的演示：https : //stackblitz.com/edit/redux-form-reset-problems

我正在使用 redux-form 7.2.0 并尝试从另一个未由 ReduxForm HOC 包装的组件重置表单值。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reset } from 'redux-form';

class MoodAnnouncement extends Component {
  constructor(props) {
    super(props);
    this.resetMood = this.resetMood.bind(this, event);
  }

  resetMood(event) {
    event.preventDefault();
    this.props.dispatch(this.props.reset('SearchFiltersForm'));
  }

  render() {
    return (
      <div className="mui-panel">
        <button
          className="mui-btn mui-btn--primary mui-btn--raised"
          disabled={this.props.MoodCheckerForm.values === undefined}
          onClick={this.resetMood}
        >Reset Mood
        </button>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    MoodCheckerForm: state.form.MoodCheckerForm,
  };
};

export default connect(mapStateToProps, { reset })(MoodAnnouncement);

当我单击远离表单的另一个组件中的重置情绪按钮时，我收到错误this.props.dispatch is not a function，所以我假设有一种不同的方法可以从连接内部调度重置操作高阶

如何从另一个使用 react-redux connect HOC 的组件重置表单值？

Answer 1

请参阅远程提交示例。

有几个问题。

您的表单名称不匹配。唯一有效的原因MoodChecker.resetMood()是，reduxForm()HoCreset()在传入 prop 时将表单名称绑定到。所以传递的错误名称实际上被忽略了。

MoodControls.resetMood()只需reset()要从 props调用绑定动作创建者，确保传入正确的表单名称。使用connect(mapStateToProps: func, mapDispatchToProps: object)表单时，作为第二个参数传递的对象会自动绑定到dispatchvia bindActionCreators()。

class MoodControls extends Component {
  // ...

  resetMood(event) {
    event.preventDefault();
    this.props.reset('MoodCheckerForm');
  }

  render() {
    // ...
  }
}

const mapStateToProps = state => ({
  MoodCheckerForm: state.form.MoodCheckerForm
});

export default connect(mapStateToProps, { reset })(MoodControls)