我在 React 中创建了一个表单,每次提交后都会清除该表单。但是,如果提交不成功,例如用户填写的字段不正确,表单也会被清除。这当然很烦人,因为用户必须重复数据输入的整个过程。所以我想要实现的是只有在成功提交后才激活的清理。如果提交不成功,数据仍保留在表单中,以便用户可以重新处理数据。
为了管理状态,我使用 Redux。
提交功能
onSubmit = e => {
e.preventDefault();
let { title, content, audio} = this.state;
let formDataStory = new FormData(); // create form formData
formDataStory.append('audio', audio); // add audio to formData
formDataStory.append('title', title); // add title to formData
formDataStory.append('content', content); // add content to formData
this.props.addStory(formDataStory); // call addStory function with formDataStory as Input to create new Story
this.setState({
title: "", // clear title field after submission
content:"", // clear content field after submission
});
this.inputRef.current.value = ''; // clear file field after submission
};
添加故事 Action
export const addStory = formDataStory => (dispatch, getState) => {
axios.post(apiBase +"/story/", formDataStory, tokenConfig(getState) )
.then(res => {
dispatch(createMessage({ addStory: "Story Added" }));
dispatch({
type: ADD_STORY,
payload: res.data
});
})
.catch(err =>
dispatch(returnErrors(err.response.data, err.response.status))
);
};
目前我不知道如何实现这一点,而且我还没有找到关于它的好读物(我的假设是这样的:如果故事成功添加,则 -> 清晰的形式,否则 -> 保持形式)。我很高兴对此的每一次支持。
最佳答案
You can use a .then and .catch after calling "this.props.addStory(formDataStory)" if you use a promise in addStory definition:
export const addStory = formDataStory => (dispatch, getState) =>
new Promiuse((resolve, reject) => {
axios.post(apiBase +"/story/", formDataStory, tokenConfig(getState) )
.then(res => {
dispatch(createMessage({ addStory: "Story Added" }));
dispatch({
type: ADD_STORY,
payload: res.data
});
resolve(res);
})
.catch(err => {
reject(err);
dispatch(returnErrors(err.response.data, err.response.status))
}
);
});
And then:
onSubmit = e => {
e.preventDefault();
let { title, content, audio} = this.state;
let formDataStory = new FormData(); // create form formData
formDataStory.append('audio', audio); // add audio to formData
formDataStory.append('title', title); // add title to formData
formDataStory.append('content', content); // add content to formData
this.props.addStory(formDataStory)
.then(() => {
this.setState({
title: "", // clear title field after submission
content:"", // clear content field after submission
});
this.inputRef.current.value = ''; // clear file field after submission
}) // call addStory function with formDataStory as Input to create new Story
};
关于javascript - react : How to clear form only after SUCCESSFUL submit?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61047246/