使用 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，所以我假设有一个不同的从连接 HOC 中分派重置操作的方法。

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

Answer 1

请参阅Remote Submit example。

有几个问题。

您的表单名称不匹配。 MoodChecker.resetMood() 起作用的唯一原因是因为 reduxForm() HoC 在传递 prop 时将表单名称绑定到 reset()。所以传递的错误名称实际上被忽略了。

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

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)