reactjs - 使用 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 不是函数，因此我假设有一个不同的函数从连接 HOC 内部调度重置操作的方法。

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

Answer 1

请参阅Remote Submit example 。

有几个问题。

您的表单名称不匹配。唯一的原因MoodChecker.resetMood()有效是因为 reduxForm() HoC 将表单名称绑定(bind)到 reset()当传入 Prop 时。因此传递的错误名称实际上被忽略了。

MoodControls.resetMood()只需要调用绑定(bind)的 Action 创建者 reset()从 Prop 中，确保传递正确的表单名称。当使用connect(mapStateToProps: func, mapDispatchToProps: object)时形式，作为第二个参数传递的对象自动绑定(bind)到 dispatch通过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)