如何使用 useState() 获取文本区域数据

Question

我已经一页一页地阅读了，但我不确定自己做错了什么。我的 useState 与我的其他输入一起使用。我无法让它与我的 textarea 一起使用。

此外，在另一个组件中使用我的数据的最佳方式是什么？

import React, { useState } from "react";

const OrderItems = () => {
const [commentText,setCommentText] = useState("")

const onSubmit = (data) => {
        console.log(data.commentText);
    }
return (
<>
<form  id="myForm" onSubmit={handleSubmit(onSubmit)} >
   <div>
       <label
           htmlFor="CommentsOrAdditionalInformation">Comments or Additional Information</label>
                 <textarea 
                     name = "commentTextArea"
                     type="text"
                     id="CommentsOrAdditionalInformation"
                     value = {commentText}
                     onChange={e => setCommentText(e.target.value)}
                      >
               </textarea>
        </div>
</form>

 <button type = "submit" form ="myForm" className="btn_submit" alt = "submit Checkout">
     <a href ="/cart/preview"/>
     <img src = ""/>
 </button>
</>
)
}

Answer 1

您正在函数外初始化状态，请按如下方式进行：此外，您在 onSubmit 中记录了错误的状态。

import React, { useState } from "react";
const OrderItems = () => {
 const [commentText,setCommentText] = useState("")

 const handleSubmit = (evt) => {
        evt.preventDefault();
        console.log(commentText);
    }
 return (
 <>
 <form  id="myForm" onSubmit={handleSubmit} >
   <div>
       <label
           htmlFor="CommentsOrAdditionalInformation">Comments or Additional Information</label>
                 <textarea 
                     name = "commentTextArea"
                     type="text"
                     id="CommentsOrAdditionalInformation"
                     value = {commentText}
                     onChange={e => setCommentText(e.target.value)}
                      >
               </textarea>
              <input type = "submit" value="Submit" className="btn_submit" alt = "submit Checkout"/>
        </div>
</form>


    
</>
)
}

要在另一个组件中使用数据：如果它是子组件，则将其作为 props 传递。否则使用 context or redux.

等状态管理工具

此外，对于路由，我建议使用 React Router。参考 here.

Answer 2

一些注意事项：

import React, { useState } from "react";

const OrderItems = () => {

  // Always initialise state inside the component
  const [commentText,setCommentText] = useState("")

  const handleOnSubmit = event => {
    event.preventDefault();
    console.log(commentText);
  }

  return (

    // onSubmit should just be a reference to handleOnSubmit
    <form  id="myForm" onSubmit={handleOnSubmit} >
      <div>
        <label
          htmlFor="CommentsOrAdditionalInformation">Comments or Additional Information
        </label>

        // You can self-close the textarea tag
        <textarea 
          name="commentTextArea"
          type="text"
          id="CommentsOrAdditionalInformation"
          value={commentText}
          onChange={e => setCommentText(e.target.value)}
        /> 
      </div>

      // Put the button inside the form
      <button type = "submit" form ="myForm" className="btn_submit" alt="submit Checkout">
        <a href ="/cart/preview"/>
        <img src = ""/>
      </button>
    </form>
  );
}

如何使用 useState() 获取文本区域数据

How to get textarea data with useState()

reactjs

react-hook-form