使用React將表單值存入數組

Question

我在將表單中的值推送到我在螢幕上映射的數組時遇到了一些問題。

const ForumTopic = [
  {
    title: "第一篇帖子",
    messages: "测试",
    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}>
          创建主题标题
          <label htmlFor="title">
            <input id="title"></input>
          </label>
          编写您的消息
          <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">
            发布新消息
          </button>
        </form>

這是我的程式碼和表單。程式碼的目的是將表單中每個標籤的值推送到topic陣列中建立一個新物件。我希望將所有內容儲存在一個新物件中，每個標籤的id與每個物件的名稱（標題、作者、日期等）匹配，但由於某種原因，我只得到了未定義的錯誤。

Answer 1

問題在於你的addTopic函數中：

e.target.value始終為undefined

要存取數據，你需要這樣做：

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

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

}

Answer 2

一種簡單的方法就是這樣做。

您需要使用input的onChange來取得您正在取得的值。

範例連結：https://stackblitz.com/edit/react-8r9f8l?file=src/App.js

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 [inputObj, setInputObj] = useState({
    title: '',
    messages: '',
    author: 'Dagger',
    count: 1,
    date: '02/16',
  });

  const handleChange = (event) => {
    setInputObj((curr) => ({
      ...curr,
      [event.target.name]: event.target.value,
    }));
  };

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

  return (
    <>
      <form onSubmit={addTopic}>
        <label htmlFor="title">
          创建一个主题标题
          <input
            id="title"
            name="title"
            value={inputObj.title}
            onChange={handleChange}
          ></input>
        </label>
        <label htmlFor="message">
          写下您的消息
          <textarea
            id="message"
            name="messages"
            value={inputObj.messages}
            onChange={handleChange}
          ></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">发布新消息</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>
          </>
        );
      })}
    </>
  );
}