React：如何使用 <textarea> Enter 键和不使用提交按钮的 React Hooks 提交表单？

Question

Halo家伙我是很新的反应，我想提交一个表单，只有一个文本区域与enter键按下。我跟踪了一些SO问题，但仍然没有运气，因为它没有提交。我还想在提交后清除文本区域。我怎么能做到这一点与下面的代码?

这是我目前拥有的代码。

const { register, handleSubmit, control, errors } = useForm();
const CommentOnSubmit = (data) => {
let formData = new FormData();
formData.append('content', data.content);
formData.append('user', user?.id);
axiosInstance.post(`api/blogs/` + slug + `/comment/`, formData);
} ;
// const commentEnterSubmit = (e) => {
//     if(e.key === 'Enter' && e.shiftKey == false) {
//         return(
//             e.preventDefault(),
//             CommentOnSubmit()
//         )
//     }
//   }
<form noValidate onSubmit={handleSubmit(CommentOnSubmit)}>
<div className="post_comment_input">
<textarea
type="text" 
placeholder="Write a comment..."
name="content"
ref={register({required: true, maxLength: 1000})}
/>
</div>
<div className="comment_post_button">
<Button type="submit" variant="contained" color="primary">comment</Button>
</div>
</form>

请帮忙。

谢谢你。

Answer 1

你可以像这样使用React SyntheticEventonKeyPress:

<textarea
type="text"
placeholder="Write a comment..."
onKeyPress={ commentEnterSubmit}
name="content"
ref={register({ required: true, maxLength: 1000 })}
/>

commentEnterSubmit函数:

const commentEnterSubmit = (e) => {
if (e.key === "Enter" && e.shiftKey == false) {
const data = {content:e.target.value};
return handleSubmit(CommentOnSubmit(data));
}

如果你想重置你的输入，你可以使用useForm钩子中的setValue。
add setValue toconst { register, handleSubmit, control, errors,setValue } = useForm();

const CommentOnSubmit = (data) => {
let formData = new FormData();
formData.append("content", data);
formData.append("user", user?.id);
// your axios call ...
setValue("content","");
};

我根据你的例子做了一个代码沙箱