Simpan nilai borang ke dalam tatasusunan menggunakan React

Question

Saya menghadapi beberapa isu menolak nilai daripada borang ke dalam tatasusunan yang saya petakan pada skrin.

const ForumTopic = [
  {
    title: "第一篇帖子",
    messages: "测试",
    author: "Dagger",
    count: 1,
    date: "02/16",
  },
];

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

Simpan ForumTopic dalam keadaan supaya penyertaan ditambah dan dipaparkan pada skrin selepas mengklik butang hantar di bawah.

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>

Ini kod dan borang saya. Tujuan kod adalah untuk menolak nilai setiap teg dalam bentuk kepada topic数组中创建一个新对象。我希望将所有内容存储在一个新对象中，每个标签的id untuk memadankan nama setiap objek (tajuk, pengarang, tarikh, dll.), tetapi atas sebab tertentu saya hanya mendapat ralat yang tidak ditentukan.

Answer 1

Masalahnya terletak pada fungsi addTopic anda:

e.target.value sentiasa tidak ditentukan

Untuk mengakses data yang anda perlukan untuk melakukan ini:

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

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

}

Answer 2

Cara mudah ialah melakukan ini.

Anda perlu menggunakan onChange input untuk mendapatkan nilai yang anda perolehi.

Contoh pautan: https://stackblitz.com/edit/react-8r9f8l?file=src%2FApp.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>
          </>
        );
      })}
    </>
  );
}