React中表单复选框/单选框/下拉选状态保存与回显问题

问题概述 #

使用React Context实现联系人管理CRUD时，遇到以下问题：

• 复选框、下拉选择框的值无法存入state
• 编辑联系人时，性别单选框无法回显选中状态
• 编辑页面底部“我想接收更新通知”复选框不显示已勾选状态

Form组件修复 #

核心修改点 #

• 给下拉框绑定name、value和onChange，同步选中值到state
• 复选框改用checked属性绑定布尔值state，单独处理其onChange事件
• 性别单选框添加checked属性，根据state值自动选中对应选项

修改后的Form组件代码：

import React, { useState } from "react";
import { useContext } from "react";
import { GlobalContext } from "../../context/GlobalState";
import { useNavigate } from "react-router-dom";
import { NavLink } from "react-router-dom";
import { v4 as uuidv4 } from 'uuid';

const Form = () => {
  const { ADD_CONTACT } = useContext(GlobalContext);
  const [contact, setContact] = useState({
    id: uuidv4(),
    name: "",
    surname: "",
    fatherName: "",
    specialty: "",
    email: "",
    gender: "",
    job: "Bakalavr", // 初始化下拉框默认值
    updatesNotification: false // 复选框用布尔值存储
  });

  const history = useNavigate();

  const onSubmit = (e) => {
    e.preventDefault();
    ADD_CONTACT(contact);
    history("/contacts");
  };

  // 单独处理复选框的状态更新
  const handleCheckboxChange = (e) => {
    setContact(prev => ({
      ...prev,
      [e.target.name]: e.target.checked
    }));
  };

  return (
    <form onSubmit={onSubmit}>
      {/* 基础输入框部分保持不变，此处省略重复代码 */}
      
      <div className="mb-3 row">
        <label className="col-sm-2 col-form-label">Job</label>
        <div className="col-sm-10 d-flex justify-content-center align-items-center">
          <select 
            className="form-select" 
            aria-label="Default select example"
            name="job"
            value={contact.job}
            onChange={(e) => setContact({ ...contact, [e.target.name]: e.target.value })}
          >
            <option value="Bakalavr">Bakalavr</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>
        </div>
      </div>

      <div className="mb-3 row">
        <label className="col-sm-2 col-form-label">Gender</label>
        <div className="col-sm-10">
          <div className="form-check form-check-inline ">
            <input
              className="form-check-input"
              type="radio"
              name="gender"
              value="male"
              checked={contact.gender === "male"} // 根据state判断选中状态
              onChange={(e) => setContact({ ...contact, [e.target.name]: e.target.value })}
            />
            <label className="form-check-label">Male</label>
          </div>
          <div className="form-check form-check-inline">
            <input
              className="form-check-input"
              type="radio"
              name="gender"
              value="female"
              checked={contact.gender === "female"} // 根据state判断选中状态
              onChange={(e) => setContact({ ...contact, [e.target.name]: e.target.value })}
            />
            <label className="form-check-label">Female</label>
          </div>
        </div>
      </div>

      <div className="form-check mb-3">
        <input 
          className="form-check-input" 
          type="checkbox"
          name="updatesNotification"
          checked={contact.updatesNotification} // 绑定复选框选中状态
          onChange={handleCheckboxChange}
        />
        <label className="form-check-label" htmlFor="flexCheckDefault">
          我想接收更新通知
        </label>
      </div>

      <button type="submit" className="btn btn-primary">
        创建新联系人
      </button>
      <NavLink to="/contacts" className="btn btn-danger m-2">
        取消
      </NavLink>
    </form>
  );
};

export default Form;

EditContactForm组件修复 #

核心修改点 #

• 补充state中job和updatesNotification字段，避免编辑时字段缺失
• 下拉框绑定state和onChange，实现回显
• 性别单选框添加checked属性，根据选中联系人的gender值回显
• 通知复选框绑定checked属性，同步选中状态

修改后的EditContactForm组件代码：

import React from "react";
import { NavLink } from "react-router-dom";
import { useContext, useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { GlobalContext } from "../../context/GlobalState";

const EditContactForm = () => {
  const { contacts, UPDATE_CONTACT } = useContext(GlobalContext);

  const [selectedContact, setSelectedContact] = useState({
    id: "",
    name: "",
    surname: "",
    fatherName: "",
    specialty: "",
    email: "",
    gender: "",
    job: "Bakalavr",
    updatesNotification: false
  });

  const history = useNavigate();
  const { id } = useParams();

  useEffect(() => {
    const userId = id;
    const foundContact = contacts.find((user) => String(user.id) === userId);
    if (foundContact) {
      // 补全可能缺失的字段，避免回显失败
      setSelectedContact({
        ...foundContact,
        job: foundContact.job || "Bakalavr",
        updatesNotification: foundContact.updatesNotification ?? false
      });
    }
  }, [id, contacts]);

  function onSubmit(e) {
    e.preventDefault();
    UPDATE_CONTACT(selectedContact);
    history("/contacts");
  }

  const handleOnChange = (e) => {
    setSelectedContact(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  const handleCheckboxChange = (e) => {
    setSelectedContact(prev => ({
      ...prev,
      [e.target.name]: e.target.checked
    }));
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        {/* 基础输入框部分保持不变，此处省略重复代码 */}
        
        <div className="mb-3 row">
          <label className="col-sm-2 col-form-label">Job</label>
          <div className="col-sm-10 d-flex justify-content-center align-items-center">
            <select 
              className="form-select" 
              aria-label="Default select example"
              name="job"
              value={selectedContact.job}
              onChange={handleOnChange}
            >
              <option value="Bakalavr">Bakalavr</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>
        </div>

        <div className="mb-3 row">
          <label className="col-sm-2 col-form-label">Gender</label>
          <div className="col-sm-10">
            <div className="form-check form-check-inline ">
              <input
                className="form-check-input"
                type="radio"
                name="gender"
                required
                value="male"
                checked={selectedContact.gender === "male"} // 根据联系人数据回显
                onChange={handleOnChange}
              />
              <label className="form-check-label">Male</label>
            </div>
            <div className="form-check form-check-inline">
              <input
                className="form-check-input"
                type="radio"
                name="gender"
                value="female"
                checked={selectedContact.gender === "female"} // 根据联系人数据回显
                onChange={handleOnChange}
              />
              <label className="form-check-label">Female</label>
            </div>
          </div>
        </div>

        <div className="form-check mb-3">
          <input 
            className="form-check-input" 
            type="checkbox"
            name="updatesNotification"
            checked={selectedContact.updatesNotification} // 回显复选框状态
            onChange={handleCheckboxChange}
          />
          <label className="form-check-label" htmlFor="flexCheckDefault">
            我想接收更新通知
          </label>
        </div>

        <button type="submit" className="btn btn-primary">
          更新联系人
        </button>
        <NavLink to="/contacts" className="btn btn-danger m-2">
          取消
        </NavLink>
      </form>
    </div>
  );
};

export default EditContactForm;

关键修复说明 #

1. 下拉选择框：必须绑定name、value和onChange，确保选中值同步到state，编辑时能正确回显
2. 复选框：使用checked属性绑定布尔值state，onChange事件需取e.target.checked更新状态，而非value
3. 单选框：通过checked属性关联state值，实现选中状态的自动同步和回显
4. state字段完整性：初始state需包含所有表单字段，编辑时补全联系人数据中可能缺失的字段，避免回显失败

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