将表单值推送到数组。（反应）答案

【问题标题】：Pushing form values to an array. (React)将表单值推送到数组。（反应）
【发布时间】：2023-02-16 19:02:50
【问题描述】：

我在将值从 form 推送到我在屏幕上映射的数组时遇到了一些问题。

const ForumTopic = [
  {
    title: "First Post",
    messages: "test",
    author: "Dagger",
    count: 1,
    date: "02/16",
  },
];

const [topic, setTopic] = useState(ForumTopic);

将 ForumTopic 存储在状态中，以便我可以在单击下面的提交按钮后添加条目并显示在屏幕上。

  const addTopic = (e) => {
    e.preventDefault();
    setTopic([...topic, e.target.value]);
  };

  <form onSubmit={addTopic}>
          Create a topic title
          <label htmlFor="title">
            <input id="title"></input>
          </label>
          Write your message
          <label htmlFor="message">
            <textarea id="message"></textarea>
          </label>
          <label htmlFor="author">
            <input id="author" defaultValue="Dagger" hidden></input>
          </label>
          <label htmlFor="count">
            <input id="count" defaultValue="1" hidden></input>
          </label>
          <label htmlFor="date">
            <input id="date" defaultValue="02/16/2023" hidden></input>
          </label>
          <button type="submit">
            Post New Message
          </button>
        </form>

那是我的代码和表格。该代码旨在推送表单中每个标签的值，以在 topic 数组中创建一个新对象。我希望所有内容都存储在一个新对象中，每个标签的 id 都与每个对象的名称（标题、作者、日期等）相匹配，但由于某种原因，我得到的都是未定义的错误。

【问题讨论】：

onSubmit={() => addTopic(e)} .. 你能试试这个吗？

标签： reactjs

【解决方案1】：

问题是在您的 addTopic 函数上： e.target.value 始终未定义

要访问您必须执行的数据：

const addTopic = (e) => {
    e.preventDefault()

    const myData = {
        title: e.target.title.value,
        message: e.target.message.value
    }
    
    setTopic(prev => [...prev, myData])        

}

【讨论】：

【解决方案2】：

一个简单的方法是这样的：

import React, { useState } from 'react';

const ForumTopic = [
  {
    title: 'First Post',
    messages: 'test',
    author: 'Dagger',
    count: 1,
    date: '02/16',
  },
];

export default function App() {
  const [topic, setTopic] = useState(ForumTopic);

  const [title, setTitle] = useState();
  const [messages, setMessages] = useState();

  const handleTitle = (e) => setTitle(e.target.value);
  const handleMessage = (e) => setMessages(e.target.value);

  const addTopic = (e) => {
    e.preventDefault();
    setTopic([
      ...topic,
      { title, messages, author: 'Dagger', count: 1, date: '02/16' },
    ]);
  };

  return (
    <>
      <form onSubmit={addTopic}>
        <label htmlFor="title">
          Create a topic title
          <input
            id="title"
            name="title"
            value={title}
            onChange={handleTitle}
          ></input>
        </label>
        <label htmlFor="message">
          Write your message
          <textarea
            id="message"
            name="message"
            value={messages}
            onChange={handleMessage}
          ></textarea>
        </label>
        <label htmlFor="author">
          <input id="author" name="author" defaultValue="Dagger" hidden></input>
        </label>
        <label htmlFor="count">
          <input id="count" name="count" defaultValue="1" hidden></input>
        </label>
        <label htmlFor="date">
          <input id="date" name="date" defaultValue="02/16/2023" hidden></input>
        </label>
        <button type="submit">Post New Message</button>
      </form>
      {topic.map((item) => {
        return (
          <>
            <p>{item.title}</p>
            <p>{item.messages}</p>
            <p>{item.author}</p>
            <p>{item.count}</p>
            <p>{item.date}</p>
            <span>------------</span>
          </>
        );
      })}
    </>
  );
}

【讨论】：