Reactjs 使用Enter键从提交，而不刷新React中的页面

我想用Enter键提交From（Textarea）值，而不刷新页面。我也不想显示提交按钮。使用下面的代码，但在回车时，它会刷新页面。我们将不胜感激

当前行为

• 可以使用Enter键提交表单，但它会刷新页面

要求的行为

• 使用Enter键提交表单，无需刷新页面和添加按钮元素

       import React, {useState, useRef} from 'react';
  
       export const AppHomeFeedPage = () => {
           const [values, setValues] = useState(NewPostsInitialValues);
           const Avatar = UserAvatar
           const ref = useRef();
  
           function changeHandler (event) {
               setValues({
                   ...values,
                   [event.target.name]: event.target.value
               });
               console.log(values)
           }
           const onSubmitForm = (e) => {
               e.preventDefault();
               if (e.keyCode === 13 || e.keyCode === 'Enter') {
                   ref.current.submit();
               }
               let userId = values.userId;
               let userName = values.userName;
               let postText = values.postText;
               console.log(userId, userName, postText )
  
           }
  
           return(
  
                   <div className='AppHomePageContentContainer'>
                       <div className="AppMainContentWrapper">
                           <form className='NewPostForm' ref={ref} onKeyUp={onSubmitForm} tabIndex={0}>
                           <div className="NewPostCardContainer">
                               <div className="NewPostCardContainerWrapper">
                                   <div className="NewPostCardTopWrapper">
                                       <div className="NewPostCarUserAvatarContainer">
                                           <div className="NewPostCarUserAvatarWrapper">
                                               <img className='NewPostCarUserAvatar' src={Avatar} alt="user image"/>
                                           </div>
                                       </div>
                                       <div className="NewPostCardInputContainer">
                                           <div className="NewPostCardInputWrapper">
                                       <textarea
                                           name='postText'
                                           className="NewPostTextArea"
                                           placeholder={`How's your Portfolio Today ?`}
                                           // id='quoteTypeLabelContainer'
                                           value={values.postText}
                                           onChange={changeHandler}
  
                                       />
                                           </div>
                                       </div>
                                   </div>
                               </div>
                           </div>
                           </form>
  
                       </div>
  
                   </div>
           )
       }
  

  import React，{useState，useRef}来自“React”；
  导出常量AppHomeFeedPage=（）=>{
  const[values，setValues]=useState（NewPostsInitialValues）；
  const Avatar=UserAvatar
  const ref=useRef（）；
  函数changeHandler（事件）{
  设定值({
  价值观
  [event.target.name]：event.target.value
  });
  console.log（值）
  }
  const onSubmitForm=（e）=>{
  e、 预防默认值（）；
  如果（e.keyCode===13 | | e.keyCode===='Enter'）{
  ref.current.submit（）；
  }
  让userId=values.userId；
  让userName=values.userName；
  让postText=values.postText；
  日志（用户ID、用户名、postText）
  }
  返回(
  将
  onSubmitForm
  用作
  onSubmit
  侦听器，而不是
  onKeyUp
  。大多数浏览器将在表单中按enter键视为提交操作
  
  i、 e
  
  谢谢你的回复，我试过了，如果我在“onSubmitForm”中按enter键而没有if语句，它不会提交，它会转到enter上的下一行，根本检测不到enter键。我尝试使用INPUT而不是TextArea进行测试，它工作得很好，但是，我需要它来使用TextArea。我认为您不会喜欢使用text area的想法。您希望使用text area的原因是支持多行文本，但现在您正在阻止用户使用它插入新行。这与文本区域的用法相矛盾。文本区域在达到指定宽度时断行，无需按enter键，但输入时不要断行，用户无法看到在指定宽度后键入的内容。
  <form onSubmit{onSubmitForm} />
  
  const onSubmitForm = e => {
    e.preventDefault();
  
    // Since this is not a keyUp event, you don't need this part
    // if (e.keyCode === 13 || e.keyCode === 'Enter') {
    //   ref.current.submit();
    // }
  
    let userId = values.userId;
    let userName = values.userName;
    let postText = values.postText;
    console.log(userId, userName, postText)
  
    // HTTP request submit form, modify it depending on your need
    fetch('/api/form', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ userId, userName, postText })
    });
  };