Я хочу создать компонент с простой формой, скажем, с 4 полями ввода и кнопкой для отправки. Когда пользователь нажимает кнопку «Отправить», будет выполнен запрос POST. Но затем я хочу повторно использовать тот же компонент для выполнения запроса PUT. Как я могу этого добиться?
Вы можете передать метод в качестве опоры для компонента - таким образом вы можете определить функциональность вне компонента и позволить ему выполнять ее в пределах области действия компонентов.
Примером этого может быть передача события 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 Ага, определенно. Только что обновил ответ и ссылку на песочницу. Если вы абсолютно не хотите иметь функции POST
и GET
в одном компоненте, вы можете продублировать логику как в CreateRecipe
, так и в UpdateRecipe
.
Можно ли создать три отдельных компонента: один с методом публикации, другой с методом обновления и последний с самой формой?