Question

我有一个像这样的高阶分量FormBuilder：

const FormBuilder = (WrappedComponent) => {
  return class HOC extends React.Component {
    clearForm() { // ... }

    render() {
      return (
        <Form onSubmit={//what do I say here?!}>
           <Form.Input placeholder='Name' name='name' />
           <WrappedComponent clearForm={this.clearForm} />
        <Form>
      );
    }
  }
}

这是WrappedComponent NewPizzaForm：

class WrappedComponent extends React.Component {
  onSubmit() { // sends a POST request to the backend, then this.props.clearForm() }

  render() {
     return (
       <Form.Button>Add Pizza</Form.Button>
     );
  }
}

const NewPizzaForm = FormBuilder(WrappedComponent);

export default NewPizzaForm;

因此，我想将onSubmit函数作为道具从WrappedComponent发送到FormBuilder，以便在提交表单时可以调用它。我决定在onSubmit中定义WrappedComponent函数的原因是因为我还有另一个具有WrappedComponent函数的FormBuilder（使用onSubmit），但是它发送PATCH请求而不是POST请求。我该如何实现？

Answer 1

您可以执行以下操作：

function logProps(InputComponent) {
  InputComponent.prototype.componentWillReceiveProps = function(nextProps) {
    console.log('Current props: ', this.props);
    console.log('Next props: ', nextProps);
  };
  // The fact that we're returning the original input is a hint that it has
  // been mutated.
  return InputComponent;
}

// EnhancedComponent will log whenever props are received
const EnhancedComponent = logProps(InputComponent);

作为参数，您可以添加道具“提交”以传递方法。

参考：https://reactjs.org/docs/higher-order-components.html#dont-mutate-the-original-component-use-composition

Answer 2

我认为我们可能需要有关项目结构的更多信息，但是您可以在FormBuilder（ funcA ）中创建一个函数，然后传递给WrappedComponent，该函数将函数作为论点。然后，当您单击WrappedComponent中的按钮时，它将把自己的onSubmit函数发送回 funcA ，可在FormBuilder中使用。

然后可以将其用于其他WrappedComponent（带有POST请求），就像您只是从两者发送onSubmit函数以在FormBuilder中调用一样。

希望这会有所帮助。

Answer 3

我不确定这是否行得通，但是也许您可以将表单提交的结果保存到HOC的状态，然后通过props将信息传递给WrappedComponent。然后，使用getDerivedStateFromProps内部的WrappedComponent，可以将提交的表单信息传递到组件的Submit函数中。

将道具传递给高阶组件

3 个答案: