React表单提交后如何同时渲染输入框与下拉选框的值？

问题根源 #

1. 原状态newEvent为字符串类型，无法同时存储活动标题和类型
2. 输入框与下拉框共用同一handleInputChange但未区分字段，导致值被覆盖
3. 提交时type字段错误赋值为newEvent，而非下拉框选中值
4. 列表渲染时单个input设置两个value属性无效，无法同时展示两个值

修改方案（分文件调整） #

1. 更新Events.js的状态定义 #

将newEvent从字符串改为包含title和type的对象，同时补全缺失的Header导入：

import React, { useState } from "react";
import EventListForm from "./EventForm";
import EventList from "./EventList";
import Header from "./Header";

const EventReminder = () => {
  // 改为对象状态，存储标题与类型
  const [newEvent, setNewEvent] = useState({ title: "", type: "Birthday" });
  const [events, setEventList] = useState([]);

  return (
    <div>
      <div>
        <div>
          <Header />
        </div>
        <div>
          <EventListForm
            newEvent={newEvent}
            setNewEvent={setNewEvent}
            events={events}
            setEventList={setEventList}
          />
        </div>
        <div>
          <EventList events={events} setEventList={setEventList} />
        </div>
      </div>
    </div>
  );
};
export default EventReminder;

2. 调整EventListForm.jsx的输入处理与提交逻辑 #

给表单元素添加name属性，通过单个handleInputChange区分更新字段；提交时正确将标题和类型存入数组：

import React from "react";
import { v4 as uuidv4 } from "uuid";

const EventListForm = ({
  newEvent,
  setNewEvent,
  events,
  setEventList,
}) => {

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    // 合并原有状态，更新对应字段
    setNewEvent(prev => ({ ...prev, [name]: value }));
  };

  const submitEvent = (event) => {
    event.preventDefault();
    // 校验标题非空再提交
    if (!newEvent.title.trim()) return;
    // 将标题与类型存入同一对象，添加到events数组
    setEventList([...events, { id: uuidv4(), title: newEvent.title, type: newEvent.type}]);
    // 重置表单
    setNewEvent({ title: "", type: "Birthday" });
  };

  return (
    <form onSubmit={submitEvent}>
      <div>
        <input
          type="text"
          placeholder="Event title"
          name="title"
          value={newEvent.title}
          onChange={handleInputChange}
        />
      </div>
      <select 
        name="type"
        value={newEvent.type}
        onChange={handleInputChange}
      >
        <option value="Birthday">生日</option>
        <option value="Graduation">毕业</option>
      </select>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  );
};

export default EventListForm;

3. 修改EventList.jsx的渲染逻辑 #

单个input无法绑定多个value，改为分别渲染标题与类型的输入框（支持编辑）：

import React from "react";

const EventList = ({ events, setEventList}) => {
  return (
    <div>
      <ul>
        {events.map((event) => (
          <li key={event.id}>
            <span>标题：</span>
            <input
              type="text"
              value={event.title}
              onChange={(e) => {
                // 更新对应活动的标题
                const updatedEvents = events.map(item => 
                  item.id === event.id ? {...item, title: e.target.value} : item
                );
                setEventList(updatedEvents);
              }}
            />
            <span> 类型：</span>
            <input
              type="text"
              value={event.type}
              onChange={(e) => {
                // 更新对应活动的类型
                const updatedEvents = events.map(item => 
                  item.id === event.id ? {...item, type: e.target.value} : item
                );
                setEventList(updatedEvents);
              }}
            />
          </li>
        ))}
      </ul>
    </div>
  );
};
export default EventList;

关键说明 #

• 可以将活动标题和类型存入同一个数组，每个数组元素是包含id、title、type的对象
• 通过name属性实现单个处理函数管理多个表单字段的状态更新
• 列表渲染需分别处理每个字段的展示与编辑，避免单个input设置多个value属性

内容的提问来源于stack exchange，提问作者Didi