Reactjs 如何使用useState（）获取textarea数据

我读了一页又一页，我不知道我做错了什么。我的useState与我的其他输入一起工作。我无法让它与我的文本区一起工作

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

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>
</>
)
}

import React，{useState}来自“React”；
常量OrderItems=（）=>{
常量[commentText，setCommentText]=useState（“”）
const onSubmit=（数据）=>{
console.log（data.commentText）；
}
返回(
评论或补充资料
setCommentText（e.target.value）}
>
)
}

您正在函数外部初始化状态，请按如下方式操作： 此外，您在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>


    
</>
)
}

import React，{useState}来自“React”；
常量OrderItems=（）=>{
常量[commentText，setCommentText]=useState（“”）
常量handleSubmit=（evt）=>{
evt.preventDefault（）；
console.log（注释文本）；
}
返回(
评论或补充资料
setCommentText（e.target.value）}
>
)
}

在另一个组件中使用数据：如果是子组件，则将其作为道具传递。否则，请使用或之类的状态管理工具

---

另外，对于路由，我建议使用React路由器。请参阅。

您正在函数外部初始化状态，请按如下方式操作： 此外，您在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>


    
</>
)
}

import React，{useState}来自“React”；
常量OrderItems=（）=>{
常量[commentText，setCommentText]=useState（“”）
常量handleSubmit=（evt）=>{
evt.preventDefault（）；
console.log（注释文本）；
}
返回(
评论或补充资料
setCommentText（e.target.value）}
>
)
}

在另一个组件中使用数据：如果是子组件，则将其作为道具传递。否则，请使用或之类的状态管理工具

---

另外，对于路由，我建议使用React路由器。请参阅。

一些需要记住的事情：

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>
  );
}

import React，{useState}来自“React”；
常量OrderItems=（）=>{
//始终初始化组件内部的状态
常量[commentText，setCommentText]=useState（“”）
const handleOnSubmit=事件=>{
event.preventDefault（）；
console.log（注释文本）；
}
返回(
//onSubmit应该只是对handleOnSubmit的引用
评论或补充资料
//您可以自行关闭textarea标记
setCommentText（e.target.value）}
/> 
//把按钮放在窗体内
);
}

需要记住的一些事情：

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>
  );
}

import React，{useState}来自“React”；
常量OrderItems=（）=>{
//始终初始化组件内部的状态
常量[commentText，setCommentText]=useState（“”）
const handleOnSubmit=事件=>{
event.preventDefault（）；
console.log（注释文本）；
}
返回(
//onSubmit应该只是对handleOnSubmit的引用
评论或补充资料
//您可以自行关闭textarea标记
setCommentText（e.target.value）}
/> 
//把按钮放在窗体内
);
}

const OrderItems=（）=>{const[commentText，setCommentText]=useState（“”）这是正确的方法，翻转这些行const OrderItems=（）=>{const[commentText，setCommentText]=useState（“”）这是正确的方法，翻转这些行很抱歉，我的组件中有我的状态，我只是在问题中粘贴了错误的状态。我用console.log（）返回未定义@NooBToCode请检查更新的答案。相应地更改console.log。哇，我需要睡觉。谢谢！！很抱歉，我的组件中有我的状态，我只是在问题中粘贴了错误的状态。我的console.log（）没有定义@NooBToCode请检查更新的答案。相应地更改console.log。哇，我需要睡觉。谢谢！！对不起，我的代码中有useState。我在问题中把它放在了错误的区域。我更新了问题。我看到上面的答案在onSubmit处理程序中修复了问题，我自己错过了那个。我也更新了我的答案！对不起，我我的代码中确实有useState。我在问题中把它放在了错误的区域。我更新了问题。我看到上面的答案在onSubmit处理程序中解决了这个问题，我自己错过了这个问题。我也更新了我的答案！