React：如何使用带有输入键的 <textarea> 提交表单，而没有使用 React Hooks 的提交按钮？答案

【问题标题】：React: How to submit a form with <textarea> with enter key and without a submit button with React Hooks?React：如何使用带有输入键的 <textarea> 提交表单，而没有使用 React Hooks 的提交按钮？
【发布时间】：2021-02-11 07:59:46
【问题描述】：

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>

请帮忙。

非常感谢。

【问题讨论】：

标签： javascript reactjs react-native react-redux rxjs

【解决方案1】：

你可以像这样使用 React SyntheticEvent onKeyPress：

   <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。像这样：
将 setValue 添加到 const { 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","");
  };

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

【讨论】：

您好，感谢您的回复。我试过了，但它显示错误cannot read property content of undefined。
我认为问题是由于您的数据参数未定义
这是错误。 cannot read property "content" of undefined
将 e.target.value 传递给：const commentEnterSubmit = (e) => { if (e.key === "Enter" && e.shiftKey == false) { e.preventDefault(); return CommentOnSubmit(e.target.value); } };sand
不客气，我已经更新了重置功能的答案。