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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
1 109
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

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

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

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

   fetch('/url/', data);
}
Ответ принят как подходящий

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

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.info("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.info("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.

Можно ли создать три отдельных компонента: один с методом публикации, другой с методом обновления и последний с самой формой?

aye 30.10.2018 20:33

@aye Ага, определенно. Только что обновил ответ и ссылку на песочницу. Если вы абсолютно не хотите иметь функции POST и GET в одном компоненте, вы можете продублировать логику как в CreateRecipe, так и в UpdateRecipe.

lux 30.10.2018 20:47

Другие вопросы по теме