[英]Handling form clear and submit message on successful submission - React
我正在尝试在我的表单提交方法中添加几行,以处理表单组件在提交时使用初始 state 值重新渲染。 我有它,以便我能够正确发布,但是当它提交时,无法判断它是否已正确提交并且表单中的数据保持不变。
有没有比我在下面尝试的方法更简单的方法? 我只想在成功保存后重定向到新组件。
获得成功消息是否包括以某种方式处理来自后端 API 的“res.send(200)”消息?
const DiveLogForm = (props) => {
....
// state for the current field value
const [dive, setDive] = useState({
diveTypeID: ``,
diveSchoolID: ``,
currentID: ``,
visibilityID: ``,
diveDate: ``,
diveMaxDepth: ``,
userID: props.user.userID,
diveVerifiedBySchool: false,
diveNotes: ``,
diveSpotID: ``,
redirectToForm: false,
error: '',
id: ''
});
.....
const jwt = auth.isAuthenticated()
...
function handleSubmitDive(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
const formData = new FormData();
formData.append("diveTypeID", dive.diveTypeID);
formData.append("diveSchoolID", dive.diveSchoolID);
formData.append("currentID", dive.currentID);
formData.append("visibilityID", dive.visibilityID);
formData.append("diveDate", dive.diveDate);
formData.append("diveMaxDepth", dive.diveMaxDepth);
formData.append("userID", dive.userID);
formData.append("diveVerifiedBySchool", dive.diveVerifiedBySchool);
formData.append("diveNotes", dive.diveNotes);
formData.append("diveSpotID", dive.diveSpotID);
formData.append("photos", photos);
const config = {
headers: {
'content-type': 'multipart/form-data'
}
};
axios.post("http://localhost:5002/api/divelog/createdivelog", jwt.token, formData, config)
.then((data) => {
if (data && data.error) {
setDive({...dive, error: data.error})
} else {
setDive({...dive, 'redirectToForm': true})
}
})
}
// Make sure you declare this outside the component .
const initialValue = {
diveTypeID: ``,
diveSchoolID: ``,
currentID: ``,
visibilityID: ``,
diveDate: ``,
diveMaxDepth: ``,
userID: props.user.userID,
diveVerifiedBySchool: false,
diveNotes: ``,
diveSpotID: ``,
redirectToForm: false,
error: '',
id: ''
}
// Now in the state when initializing you can do this
const [ dive, setDive ] = useState(initialValue);
// In your handle submit when the request is successfull inside your then
setDive(initialValue);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.