Stocker les valeurs du formulaire dans un tableau à l'aide de React

Question

J'ai quelques problèmes pour pousser les valeurs d'un formulaire vers un tableau que je mappe à l'écran.

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

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

Stockez le ForumTopic dans l'état afin que les entrées soient ajoutées et affichées à l'écran après avoir cliqué sur le bouton Soumettre ci-dessous.

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>

Voici mon code et mon formulaire. Le but du code est de pousser la valeur de chaque balise du formulaire vers topic数组中创建一个新对象。我希望将所有内容存储在一个新对象中，每个标签的id pour qu'elle corresponde au nom de chaque objet (titre, auteur, date, etc.), mais pour une raison quelconque, j'obtiens simplement une erreur indéfinie.

Answer 1

Le problème réside dans votre fonction addTopic :

e.target.value est toujours indéfini

Pour accéder aux données, vous devez procéder comme suit :

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

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

}

Answer 2

Un moyen simple est de procéder ainsi.

Vous devez utiliser onChange de l'entrée pour obtenir la valeur que vous obtenez.

Exemple de lien : 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>
          </>
        );
      })}
    </>
  );
}