如何通過<form>數據到 React 中的 object 數組</form>

Question

我正在嘗試制作這個簡單的組件，我在輸入框中鍵入一條消息，並且該組件在輸入字段下方的列表中返回消息。 但是，當我單擊提交按鈕時，下面出現的唯一內容是一個空白的項目符號點

import React, { useState } from 'react'

function Form(props) {
    const [message, setMessage] = useState([])

    const addMessageHandler = (event) => {
        event.preventDefault()

        const data = new FormData(event.target);

        const _data = data.get('input')

        setMessage([...message, { id: message.length, value: _data }])
    }

    return (
        <div>
            <form onSubmit={addMessageHandler} id='input'>
                <label>Type a Message</label>
                <input type='text'></input>
                <button type='submit'>Submit</button>
            </form>

            <ul>
                {
                    message.map(msg => (
                        <li key={msg.id}>{msg.value}</li>
                    ))
                }
            </ul>
        </div>
    )
}

export default Form

Answer 1

所有方式都將“id”和“name”屬性添加到輸入字段。

  <label htmlFor="chat_box">Type a Message</label>
  <input type='text' id="chat_box" name="chatbox_input" />

現在您可以訪問e.currentTarget.elements中的輸入元素，只需確保您為input標簽提供了唯一的名稱。

const addMessageHandler = (event) => {
  event.preventDefault()
  setMessage((message) => [...message, { id: message.length, value:  e.currentTarget.elements['chatbox_input'].value }])
}