使用功能组件,我需要用字符串形式的onSubmit数据填充一个array.handleSubmit应该存储字符串数据,但当我使用console.log(value)时,它返回一个空array.

我不知道如何从表单访问用户输入,以便将其存储到数组中.我原以为setValue([value])可以实现这一点,但很明显我的代码有些地方不对劲.

当单击提交按钮时,read2List应该从value中获取数据并将其存储到一个数组中.我很感激大家的pip !谢谢您抽时间见我!

console.log(value)

function App () { 
     const [value, setValue] = useState("");
     const [entrylist, setEntry] = useState([]);
        
        const handleSubmit = (event) => {
            event.preventDefault();
            setValue([value])
            console.log(value) 
        }   
        const read2List = () => {
            const updatedList = [...entrylist];
            updatedList.push(value);
            setEntry(updatedList);
           console.log(updatedList);
        } 

     return (
        <div>
        <div> Insert Entry  </div> 

        <form class="entryForm"  onSubmit={handleSubmit}  >
            <label for="newEntryId"> 
            <span>New Entry:</span>
            <textarea  type="text" id="newEntryId" name="newEntryName" rows="30" cols="75" defaultValue = {"What's on your mind?"} 
        /> 
            </label>
            <button type="submit" onClick={read2List}>Submit</button>
       
        </form>
        </div>
    )
    
}

推荐答案

你可以这样做,如下所示.我简化了你的代码.我go 掉了read2List个函数,因为你可以用一个函数做你想做的事情.我在代码中添加了注释.这里也有一张CodeSandbox英镑的工作钞票.

import { useRef, useState } from "react";

export default function App() {
  const textAreaRef = useRef();
  const [entrylist, setEntry] = useState([]);
  console.log(entrylist); // I added the console log here, to see changes

  const handleSubmit = (event) => {
    event.preventDefault();
    const updatedList = [...entrylist];
    updatedList.push(textAreaRef.current.value);
    textAreaRef.current.value = ""; // clear the input after submit
    setEntry(updatedList);
  };

  return (
    <div>
      <div> Insert Entry </div>
      <form className="entryForm" onSubmit={handleSubmit}>
        <label htmlFor="newEntryId">
          <span>New Entry:</span>
          <textarea
            type="text"
            id="newEntryId"
            name="newEntryName"
            rows="30"
            cols="75"
            defaultValue="What's on your mind?"
            ref={textAreaRef}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

要了解有关在Reaction中处理输入的更多信息,请访问官方文档中的这page篇文章.

Javascript相关问答推荐

过滤对象数组并动态将属性放入新数组

为什么我的includes声明需要整个字符串?

单击子元素时关闭父元素(JS)

如何在 cypress 中使用静态嵌套循环

Prisma具有至少一个值的多对多关系

使用POST请求时,Req.Body为空

如何在每次单击按钮时重新加载HighChart/设置HighChart动画?

编辑文本无响应.onClick(扩展脚本)

如何将innerHTML字符串修剪为其中的特定元素?

为什么客户端没有收到来自服务器的响应消息?

在画布中调整边上反弹框的大小失败

在FAQ Accodion应用程序中使用React useState时出现问题

如何使用基于promise (非事件emits 器)的方法来传输数据?

如何在Press上重新启动EXPO-AV视频?

如何使本地html页面在重新加载时保持当前可隐藏部分的打开状态?

使用Perl Selify::Remote::Driver执行Java脚本时出错

限制数组中每个元素的长度,

如何使pdf.js上的文本呈现为可选?

在对象的嵌套数组中添加两个属性

react :图表负片区域不同 colored颜色