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

Question

Я хочу создать компонент с простой формой, скажем, с 4 полями ввода и кнопкой для отправки. Когда пользователь нажимает кнопку отправить, будет сделан запрос POST. Но затем я хочу повторно использовать тот же компонент, чтобы сделать запрос PUT. Как мне этого добиться?

Answer 1

Вы можете передать метод в компонент как prop, а затем ссылочные реквизиты в вашей функции отправки следующим образом:

submit = () => {
     var data = {
        method: this.props.method,
        ...
     };

   fetch('/url/', data);
}

Answer 2

Передайте функцию из родительского компонента вашему дочернему компоненту (форма):

https://codesandbox.io/s/4x3zjwxwkw

const App = () => (
  <div>
    <CreateRecipe />
    <UpdateRecipe />
  </div>
);

class CreateRecipe extends React.Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }
  onSubmit(e) {
    e.preventDefault();
    console.log("Do POST recipe");
  }
  render() {
    return (
      <div>
        <MyForm title="POST Recipe" onSubmit={this.onSubmit} />
      </div>
    );
  }
}

class UpdateRecipe extends React.Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }
  onSubmit(e) {
    e.preventDefault();
    console.log("Do GET recipe");
  }
  render() {
    return (
      <div>
        <MyForm title="GET Recipe" onSubmit={this.onSubmit} />
      </div>
    );
  }
}

const MyForm = ({ title, onSubmit }) => {
  return (
    <div>
      <h2>{title}</h2>
      <form onSubmit={onSubmit}>
        <input type="text" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

РЕДАКТИРОВАТЬ : Согласно комментарию, вы можете абсолютно разделить функции отправки POST и GET, но это немного дублирует логику. Что может быть лучше, так это иметь компонент <App />, владеющий двумя функциями отправки, и передавать их соответственно <UpdateRecipe /> и <PostRecipe />, возможно, даже заголовкам! Я позволю вам составить это так, как вы пожелаете, но, надеюсь, это покажет вам гибкость React.

Answer 3

Вы можете передать метод в качестве опоры для компонента - таким образом, вы можете определить функциональность вне компонента и позволить ему выполнять его в области действия компонентов.

Примером этого может быть передача события onPress кнопке или события onClick любому другому компоненту.