解决React输入框“只读”问题：深入理解受控与非受控组件及状态管理

import React, { useState } from 'react';

function CompanyEditor() {
  const [companies, setCompanies] = useState([
    {
      id: 1,
      name: 'Company A',
      children: [{ id: 101, name: 'Department X' }]
    },
    {
      id: 2,
      name: 'Company B',
      children: [{ id: 201, name: 'Department Y' }]
    },
  ]);

  /**
   * 处理部门名称变化的函数
   * @param {number} companyIndex 公司在数组中的索引
   * @param {number} departmentIndex 部门在公司子数组中的索引
   * @param {Object} e 事件对象
   */
  const handleDepartmentChange = (companyIndex, departmentIndex, e) => {
    // 1. 浅拷贝companies数组，避免直接修改原始状态
    const newCompanies = [...companies]; 

    // 2. 浅拷贝目标公司对象，避免直接修改原始公司对象
    const companyToUpdate = { ...newCompanies[companyIndex] }; 

    // 3. 浅拷贝公司下的children（部门）数组
    const childrenToUpdate = [...companyToUpdate.children]; 

    // 4. 更新目标部门对象，确保不可变性
    childrenToUpdate[departmentIndex] = {
      ...childrenToUpdate[departmentIndex], // 拷贝部门的其他属性
      name: e.target.value, // 更新name属性
    };

    // 5. 将更新后的children数组赋值回公司对象
    companyToUpdate.children = childrenToUpdate;
    // 6. 将更新后的公司对象赋值回companies数组
    newCompanies[companyIndex] = companyToUpdate;

    // 7. 使用setCompanies更新状态，触发组件重新渲染
    setCompanies(newCompanies); 
  };

  return (
    <div>
      <h2>公司及部门管理</h2>
      {companies.map((company, companyIndex) => (
        <div key={company.id} style={{ border: '1px solid #ccc', padding: '15px', marginBottom: '20px' }}>
          <h3>公司名称: {company.name}</h3>
          <h4>部门列表:</h4>
          {company.children.map((department, departmentIndex) => (
            <div key={department.id} style={{ display: "flex", alignItems: "center", marginBottom: "10px" }}>
              <label style={{ marginRight: '10px' }}>部门 {departmentIndex + 1}:</label>
              <input
                style={{ width: "250px", padding: "8px", border: "1px solid #ddd" }}
                type="text"
                value={department.name} // 输入框的值始终绑定到当前的state
                onChange={(e) =>
                  handleDepartmentChange(companyIndex, departmentIndex, e)
                }
              />
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

export default CompanyEditor;

import React, { useRef } from 'react';

function UncontrolledInputExample({ initialName }) {
  const inputRef = useRef(null); // 创建一个ref来引用input元素

  const handleSubmit = () => {
    // 通过ref获取input的当前值
    alert('当前值: ' + inputRef.current.value);
  };

  return (
    <div style={{ padding: '20px', border: '1px dashed #999', marginTop: '20px' }}>
      <h3>非受控组件示例</h3>
      <label style={{ marginRight: '10px' }}>部门名称 (非受控):</label>
      <input
        type="text"
        defaultValue={initialName} // 设置初始值，后续变化由DOM管理
        ref={inputRef} // 将ref绑定到input元素
        style={{ padding: "8px", border: "1px solid #ddd" }}
      />
      <button onClick={handleSubmit} style={{ marginLeft: '10px', padding: '8px 15px' }}>获取当前值</button>
      <p style={{ fontSize: '0.9em', color: '#666' }}>注意：此输入框的值由DOM自行管理，React不会实时更新其状态。</p>
    </div>
  );
}

// 在其他组件中使用时:
// <UncontrolledInputExample initialName="初始部门名" />