React中多输入框如何单独更新对应state值避免被覆盖？

问题核心原因 #

你遇到的state覆盖问题，本质是更新对象类型的state时，没有保留原有state的其他字段，直接用仅包含单个字段的新对象替换了完整state，导致未修改的字段值丢失。

具体实现步骤 #

• 第一步：统一把所有输入值存在同一个对象类型的state中，state的键名和后续输入框的name属性一一对应

  import { useState } from 'react'
  
  // 示例state结构，可根据你的业务需求增减字段
  const [cvShowInfo, setCvShowInfo] = useState({
    username: "默认展示姓名",
    job: "默认展示职位",
    desc: "默认个人简介"
  })
  

• 第二步：给每个输入框添加name属性，属性值和上述state的键名完全一致，同时绑定同一个onChange处理函数和对应value

  {/* 姓名输入框 */}
  <input 
    name="username" 
    value={cvShowInfo.username}
    onChange={handleInputChange}
    placeholder="请输入姓名"
  />
  
  {/* 职位输入框 */}
  <input 
    name="job" 
    value={cvShowInfo.job}
    onChange={handleInputChange}
    placeholder="请输入职位"
  />
  

• 第三步：编写公用的onChange处理函数，更新state时先展开旧state的所有字段，再覆盖当前修改的字段

  const handleInputChange = (e) => {
    const { name, value } = e.target
    // 传入函数式更新，基于上一次的state计算新state，确保拿到的旧值是最新的
    setCvShowInfo(prevState => ({
      ...prevState, // 展开保留所有未修改的字段
      [name]: value // 只覆盖当前正在修改的字段
    }))
  }
  

• 第四步：另一个组件需要展示对应值时，直接取state中对应字段即可，比如姓名展示为 <h1>{cvShowInfo.username}</h1>，各输入框的修改不会互相干扰。

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