Передача реквизита компоненту высшего порядка

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

Я совсем не уверен, что это сработает, но, возможно, вы могли бы сохранить результат отправки формы в состояние HOC, а затем передать эту информацию в WrappedComponent с помощью реквизита. Затем с помощью getDerivedStateFromProps Внутри WrappedComponentВы можете передать отправленную информацию формы в функцию отправки компонента.

Answer 2

Вы можете действовать следующим образом:

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);

---

В качестве параметра вы можете добавить реквизит "submit" для передачи в метод.

Ссылка: https://reactjs.org/docs/higher-order-components.html

Answer 3

Я думаю, что нам может потребоваться немного больше информации о структуре вашего проекта, но вы можете создать функцию внутри FormBuilder (funcA), которую вы передадите в WrappedComponent, который принимает функцию в качестве аргумента. Затем, когда вы нажимаете кнопку внутри WrappedComponent, она отправляет свою собственную функцию onSubmit обратно в funcA, где ее можно использовать в FormBuilder.

Затем его можно использовать в другом WrappedComponent (с запросом POST), так как вы просто отправляете функцию onSubmit из обоих для вызова в FormBuilder.

Надеюсь это поможет.