首页 文章

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

提问于
浏览 次
2

这是我的问题的演示：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的组件重置表单值？

reactjs redux react-redux redux-form

1 回答

  • 3

    请参阅Remote Submit example .

    有几个问题 .

    您的表单名称不匹配 . MoodChecker.resetMood() 工作的唯一原因是因为 reduxForm() HoC在传递道具时将表格名称绑定到 reset() . 因此传递的错误名称实际上被忽略了 .

    MoodControls.resetMood() 只需要从道具中调用绑定的动作创建者 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)
    回复于

相关问题