[英]clear a form after posting a message in react
當用戶向留言板提交消息時,用戶輸入在發布后仍然存在。 我可以實現什么語法來在提交時清除輸入字段?
import { Card, Container, Form, Button } from "react-bootstrap";
import Label from "react-bootstrap/Card";
import React, { useState } from "react";
export default function MessageForm({handleAddPost}) {
const [formData, setFormData] = useState({
photo: '',
title: '',
content: ''
})
function handleChange(evt) {
setFormData({...formData, [evt.target.name]: evt.target.value});
}
function handleSubmit(e) {
e.preventDefault();
handleAddPost(formData);
}
return (
<Container>
<Card className="text-center" border="success" style={{ width: '85vw' }}>
<Form size="sm" autoComplete="off" onSubmit={handleSubmit}>
<Label>Title</Label>
<Form.Control size="sm"
value={formData.title} name="title"
onChange={e => handleChange(e)}
/>
<Label>Message</Label>
<Form.Control size="sm"
value={formData.content} name="content"
onChange={e => handleChange(e)}
/>
<Button size="sm" variant="success" type="submit">Add Post</Button>
</Form>
</Card>
</Container>
);
}
你可以做類似的事情
import { Card, Container, Form, Button } from "react-bootstrap";
import Label from "react-bootstrap/Card";
import React, { useState } from "react";
const initialState = {
photo: '',
title: '',
content: ''
};
export default function MessageForm({handleAddPost}) {
const [formData, setFormData] = useState(initialState);
function handleChange(evt) {
setFormData({...formData, [evt.target.name]: evt.target.value});
}
async function handleSubmit(e) {
e.preventDefault();
await handleAddPost(formData);
setFormData(initialState);
}
return (
<Container>
<Card className="text-center" border="success" style={{ width: '85vw' }}>
<Form size="sm" autoComplete="off" onSubmit={handleSubmit}>
<Label>Title</Label>
<Form.Control size="sm"
value={formData.title} name="title"
onChange={e => handleChange(e)}
/>
<Label>Message</Label>
<Form.Control size="sm"
value={formData.content} name="content"
onChange={e => handleChange(e)}
/>
<Button size="sm" variant="success" type="submit">Add Post</Button>
</Form>
</Card>
</Container>
);
}
在最后添加 handleSubmit
setFormData({
photo: '',
title: '',
content: ''
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.