带有自定义标志的 Redux-Form 6.8.0 远程提交

Question

我想知道如何将自定义标志传递给 redux-form onSubmit 函数。我的场景是我在 redux 表单之外有 2 个保存按钮（都调用不同的 API 请求），所以我使用远程提交方法。

表单组件：

function handleFormSubmit(data) {
  // I need to distinguish here which button was clicked
}

class FormComponent extends React.Component {
  
  render() {
    return (
      <form onSubmit={this.props.handleSubmit}>
        ...
      </form>
    );
  }
}

export default connect(mapStateToProps, {
})(reduxForm({
  form: 'MyForm',
  onSubmit: handleFormSubmit,
})(FormComponent));

带有 2 个按钮的栏组件：

import React from 'react';

class BarComponent extends React.Component {
  props: Props;


  render() {
    return (
      <div>
        <button onChange={this.props.submit('MyForm')}>Save</button>
        <button onChange={this.props.submit('MyForm')}>Save as new version</button>
      </div>
    );
  }
}

export default connect(mapStateToProps, {
  submit
})(BarComponent);

任何想法如何知道在handleFormSubmit 中单击了哪个按钮？

Answer 1

您可以将这些按钮中的每一个包装在 reduxForm 中，并使用与主表单相同的 name 并为两者实现不同的 onSubmit 逻辑。更好的是，你可以很好地抽象出来：

// component code (take with a grain on pseudo-code salt)
export class SubmitButton extends Component {

  render() {
    const { children, handleSubmit } = this.props

    return (
      <form onSubmit={ handleSubmit }>
        <button type="submit">{ children }</button>
      </form>
    )
  }

}

@reduxForm()
export default SubmitButtonContainer extends SubmitButton {}

上面的示例基本上是一个抽象出来的按钮，只要您提供表单名称和onSubmit 函数，它就会提交redux-form 表单。您还应该能够为它提供any other props that reduxForm eats。如果您需要加载指示等，您可以使用the props that come with wrapping a component with reduxForm。

然后你可以使用它来实现绑定到不同按钮的自定义提交逻辑：

// usage code (again more pseudo-code salts with this one)
import React from 'react';
import SubmitButton from 'path/to/SubmitButton'

class BarComponent extends React.Component {
  props: Props;

  onSave() {
    // do the regular save logic here
  }

  onSaveAsNewVersion() {
    // do the other save logic here
  }

  render() {
    return (
      <div>
        <SubmitButton form="MyFormName" onSubmit={ this.onSave }>Save</button>
        <SubmitButton form="MyFormName" onSubmit={ this.onSaveAsNewVersion }>Save as new version</button>
      </div>
    );
  }
}

export default connect(mapStateToProps, {
  submit
})(BarComponent);

上面的两个例子都应该被视为伪代码，我不保证它们会开箱即用。这个原理确实有效，我已经实现过几次了。

希望这会有所帮助！