Home  >  Q&A  >  body text

Store form values ​​into array using React

I'm having some issues pushing values ​​from a form to an array that I'm mapping on the screen.

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

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

Store the ForumTopic in the state so that entries are added and displayed on the screen after clicking the submit button below.

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>

This is my code and form. The purpose of the code is to push the value of each label in the form to create a new object in the topic array. I want to store everything in a new object, with each tag's id matching the name of each object (title, author, date, etc.), but for some reason I just get undefined mistake.

P粉092778585P粉092778585427 days ago449

reply all(2)I'll reply

  • P粉766520991

    P粉7665209912023-09-11 14:26:00

    The problem lies in your addTopic function:

    e.target.value is always undefined

    To access the data you need to do this:

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

    reply
    0
  • P粉760675452

    P粉7606754522023-09-11 09:40:43

    A simple way is to do this.

    You need to use input's onChange to get the value you are getting.

    Sample link: 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>
              </>
            );
          })}
        </>
      );
    }

    reply
    0
  • Cancelreply