如何为React表单的不同输入项正确设置对象状态？

原代码存在的问题 #

• 直接修改状态对象：setBookFormInput((book) => (book?.bookName = e.target.value)) 这种写法违反React状态不可变原则，且返回的是赋值结果而非新对象，会导致状态更新异常。
• 状态初始值为undefined：访问book?.bookName时容易出现空值问题，表单输入无法正确绑定。
• label的for属性错误：多个标签复用了bookName，无法正确关联对应的输入框。
• 输入框未绑定value：属于非受控组件，无法实时同步状态值。

正确实现步骤 #

1. 初始化完整的状态对象
   给useState传入符合Book接口的初始值，避免空值问题：

   const [bookFormInput, setBookFormInput] = useState<Book>({
     bookName: '',
     bookGenre: '',
     pageCount: '',
     bookAuthorName: '',
     isbnNumber: ''
     // 补充Book接口要求的其他属性
   });
   

2. 编写通用的change处理函数
   利用输入框的name属性匹配状态对象的键，统一处理所有输入的更新，同时遵循不可变更新原则：

   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setBookFormInput(prev => ({
       ...prev,
       [name]: value
     }));
   };
   

3. 修正表单元素属性

   • 给每个输入框添加name属性，值与bookFormInput的属性名一致；
   • 绑定value属性到对应状态值；
   • 修正label的for属性，匹配对应输入框的id。

修改后的完整代码 #

import React, { useState } from 'react';
import { Book } from '../interfaces';

interface AddBookFormProps {
  isVisible: boolean;
  toggleVisibility: () => void;
}

export const AddBookForm: React.FC<AddBookFormProps> = ({
  isVisible,
  toggleVisibility,
}) => {
  // 初始化符合Book接口的状态对象
  const [bookFormInput, setBookFormInput] = useState<Book>({
    bookName: '',
    bookGenre: '',
    pageCount: '',
    bookAuthorName: '',
    isbnNumber: ''
    // 根据你的Book接口补充其他必填属性
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setBookFormInput(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault(); // 阻止默认表单提交行为
    // 这里可以处理表单提交逻辑，比如调用API添加书籍
    console.log('提交的书籍信息:', bookFormInput);
    toggleVisibility(); // 提交后关闭弹窗
  };

  return (
    <>
      {isVisible && (
        <div className="fixed right-1/3 bottom-1/4 h-2/3 w-1/3 border-4 bg-white border-slate-600 shadow-xl">
          <div className="flex justify-between bg-slate-400">
            <p className="text-3xl m-6">Add a new Book</p>
            <div className="h-16 w-16 m-3">
              <button onClick={toggleVisibility}>
                <img
                  src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/OOjs_UI_icon_close.svg/1200px-OOjs_UI_icon_close.svg.png"
                  alt="close-button"
                  className="object-fit border border-slate-900 hover:border-white transition rounded-md"
                />
              </button>
            </div>
          </div>
          <div className="flex justify-center">
            {/* 绑定提交事件 */}
            <form 
              className="w-1/2 bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 "
              onSubmit={handleFormSubmit}
            >
              <label
                htmlFor="bookName"
                className="block text-gray-700 font-bold text-sm mb-1"
              >
                Book name:
              </label>
              <input
                type="text"
                id="bookName"
                name="bookName" // 添加name属性
                value={bookFormInput.bookName} // 绑定value
                placeholder="Book name"
                className="w-full border rounded-md border-slate-500 text-sm ml-1 pl-1 mb-4"
                onChange={handleInputChange} // 使用通用处理函数
              />
              
              <label
                htmlFor="bookGenre" // 修正for属性
                className="block text-gray-700 font-bold text-sm mb-1"
              >
                Book genre:
              </label>
              <input
                type="text"
                id="bookGenre"
                name="bookGenre"
                value={bookFormInput.bookGenre}
                placeholder="Book genre"
                className="w-full border rounded-md border-slate-500 text-sm ml-1 pl-1 mb-4"
                onChange={handleInputChange}
              />
              
              <label
                htmlFor="pageCount"
                className="block text-gray-700 font-bold text-sm mb-1"
              >
                Page Count:
              </label>
              <input
                type="number" // 页数应该用number类型
                id="pageCount"
                name="pageCount"
                value={bookFormInput.pageCount}
                placeholder="Page count"
                className="w-full border rounded-md border-slate-500 text-sm ml-1 pl-1 mb-4"
                onChange={handleInputChange}
              />
              
              <label
                htmlFor="bookAuthorName"
                className="block text-gray-700 font-bold text-sm mb-1"
              >
                Book author name:
              </label>
              <input
                type="text"
                id="bookAuthorName"
                name="bookAuthorName"
                value={bookFormInput.bookAuthorName}
                placeholder="Book author name"
                className="w-full border rounded-md border-slate-500 text-sm ml-1 pl-1 mb-4"
                onChange={handleInputChange}
              />
              
              <label
                htmlFor="isbnNumber"
                className="block text-gray-700 font-bold text-sm mb-1"
              >
                Isbn Number:
              </label>
              <input
                type="text"
                id="isbnNumber"
                name="isbnNumber"
                value={bookFormInput.isbnNumber}
                placeholder="Isbn Number"
                className="w-full border rounded-md border-slate-500 text-sm ml-1 pl-1 mb-6"
                onChange={handleInputChange}
              />

              {/* 添加提交按钮 */}
              <button
                type="submit"
                className="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
              >
                Add Book
              </button>
            </form>
          </div>
        </div>
      )}
    </>
  );
};

额外优化点 #

• 页数输入框改成type="number"，更符合输入场景；
• 给label和输入框添加间距类，优化表单布局；
• 给表单添加onSubmit事件，阻止默认提交行为并处理提交逻辑；
• 添加提交按钮，完善表单功能。

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