首页 > 解决方案 > React：如何提交表单 with enter key and without a submit button with React Hooks?</h1> <div id="body"><p>Halo guys I am quite new to react and I want to submit a form with only a text area with <code>enter</code> key press.</p> </div> <div class="container" id="article"> <div class="page-header"> <h1>javascript - React：如何提交表单<textarea> with enter key and without a submit button with React Hooks?</h1> <div id="body"><p>Halo guys I am quite new to react and I want to submit a form with only a text area with <code>enter</code> key press.</h1> </div> <div class="con"> <h3>问题描述</h3> <p class="author">标签： <span>javascript</span><span>reactjs</span><span>react-native</span><span>react-redux</span><span>rxjs</span></div> <h3>解决方案</h3> <hr> <div class="con "> <div class="body"> <p>你可以像这样使用 React <a href="https://reactjs.org/docs/events.html#keyboard-events" rel="nofollow noreferrer">SyntheticEvent</a> <code>onKeyPress</code>：</p> <pre><code> <textarea type="text" placeholder="Write a comment..." onKeyPress={ commentEnterSubmit} name="content" ref={register({ required: true, maxLength: 1000 })} /> </code></pre> <p><strong>更新</strong><br> 在您的<em>commentEnterSubmit</em>函数中：</p> <pre><code> const commentEnterSubmit = (e) => { if (e.key === "Enter" && e.shiftKey == false) { const data = {content:e.target.value}; return handleSubmit(CommentOnSubmit(data)); } </code></pre> <p>如果你想重置你的输入，你可以使用<code>setValue</code>from<code>useForm</code>钩子。像这样：<br> 将 setValue 添加到<code> const { register, handleSubmit, control, errors,setValue } = useForm();</code></p> <pre><code> const CommentOnSubmit = (data) => { let formData = new FormData(); formData.append("content", data); formData.append("user", user?.id); // your axios call ... setValue("content",""); }; </code></pre> <p>我根据您的示例制作了一个代码<a href="https://codesandbox.io/s/funny-maxwell-24lhw?file=/src/form.js" rel="nofollow noreferrer">沙盒</a></p> </div> <div class="clear"></div> </div> <hr> <h3>推荐阅读</h3> <ul> <li><a href="/question/58760201.html">python - 构造一个大于任何字符串的对象</a></li><li><a href="/question/58760205.html">javascript - 在Javascript中自动完成输入日期？</a></li><li><a href="/question/58760209.html">amazon-web-services - 卓：我的账户会收到意外费用吗？</a></li><li><a href="/question/58760214.html">java - 为什么导入字体会破坏代码的其他部分？</a></li><li><a href="/question/58760217.html">html - 如何使 Navbar 和 Carousel 始终全屏结合</a></li><li><a href="/question/58760218.html">javascript - IPFS 返回文件地址</a></li><li><a href="/question/58760219.html">yii2 - 无法打开文件以读取 [filename.pdf] yii2 swiftmailer</a></li><li><a href="/question/58760223.html">javascript - 如何在 FlatList 中的项目之间切换？</a></li><li><a href="/question/58760234.html">django - 有没有办法通过 Django 模板在 if 条件中使用模型字段？</a></li><li><a href="/question/58760235.html">python - 如何更快地裁剪出高振幅的音频部分</a></li> </ul> </div> <footer> <p><a href="/">时间戳在线转换</a></p> </footer> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6117966252207595" crossorigin="anonymous"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7145e10314e5e27e886ad54be2aeb067"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body></html>