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在传递道具时将表单名称绑定到reset()。因此传递的错误名称实际上被忽略了。

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

使用redux-form，如何从其他组件重置表单值？

1 个答案: