React中服务器数据填充的input无readonly却不可编辑，如何处理？

你的问题核心是输入框作为受控组件，仅绑定了value属性但未实现状态更新逻辑，导致输入框的值被初始的服务器数据固定，无法随用户输入改变。

问题原因 #

在React中，当给<input>设置value属性后，它就成为了受控组件：输入框的内容完全由value对应的状态值决定，只有当状态值更新时，输入框才会显示新内容。你当前的代码仅将父组件传递的templateData直接映射到value，但没有处理用户输入时的状态更新逻辑，所以输入操作无法改变输入框内容。

解决方案 #

需要为Form组件维护表单状态，并为每个输入框绑定onChange事件，在输入时更新对应状态。下面提供两种实现方案：

方案1：Form组件内部维护表单状态 #

适用于表单数据仅在组件内部使用的场景，通过useState初始化状态，useEffect监听父组件props变化来更新表单：

import { useState, useEffect } from 'react';

function Form({ templateId, templateData }) {
  // 将templateData转为更易操作的对象数组，初始化表单状态
  const [formData, setFormData] = useState(() => {
    return templateData.map(item => ({ key: item[0], value: item[1] }));
  });

  // 当父组件的templateData变化（如切换模板），重新初始化表单
  useEffect(() => {
    setFormData(templateData.map(item => ({ key: item[0], value: item[1] })));
  }, [templateData]);

  // 更新key输入框的状态
  const handleKeyChange = (index, newValue) => {
    const updatedData = [...formData];
    updatedData[index].key = newValue;
    setFormData(updatedData);
  };

  // 更新value输入框的状态
  const handleValueChange = (index, newValue) => {
    const updatedData = [...formData];
    updatedData[index].value = newValue;
    setFormData(updatedData);
  };

  const renderInputs = formData.map((item, index) => {
    return (
      <div key={index}>
        <input
          value={item.key}
          onChange={(e) => handleKeyChange(index, e.target.value)}
          placeholder="键"
        />
        <input
          value={item.value}
          onChange={(e) => handleValueChange(index, e.target.value)}
          placeholder="值"
        />
      </div>
    );
  });

  // 表单提交逻辑
  const handleSubmit = (e) => {
    e.preventDefault();
    // 将表单数据转为服务器需要的格式
    const submitData = formData.reduce((acc, item) => {
      acc[item.key] = item.value;
      return acc;
    }, {});
    // 这里可替换为实际的提交请求
    console.log('提交数据:', { id: templateId, myData: submitData });
  };

  return (
    <form onSubmit={handleSubmit}>
      {renderInputs}
      <button type="submit">提交修改</button>
    </form>
  );
}

方案2：状态提升到父组件维护 #

适用于父组件需要直接获取或管理表单数据的场景，将表单状态放在父组件，传递更新方法给Form：

父组件修改：

import { useState } from 'react';
import Form from './Form';

function ParentComponent() {
  const [templateId, setTemplateId] = useState("");
  const [formData, setFormData] = useState([]);

  function mkForm(selection) {
    if(selection !== "newTemplate"){
      fetch(`http://localhost:3000/custom/${selection}`)
        .then((response) => response.json())
        .then((data)=>{
          setTemplateId(data.id);
          // 直接初始化表单状态为对象数组
          setFormData(Object.entries(data.myData).map(item => ({ key: item[0], value: item[1] })));
        })
    } else{
      setTemplateId("");
      setFormData([]);
    }
  }

  return (
    <div>
      {/* 这里假设selection是通过其他组件触发，比如下拉框 */}
      <button onClick={() => mkForm("template1")}>加载模板1</button>
      <Form templateId={templateId} formData={formData} setFormData={setFormData} />
    </div>
  );
}

Form组件修改：

function Form({ templateId, formData, setFormData }) {
  const handleKeyChange = (index, newValue) => {
    const updatedData = [...formData];
    updatedData[index].key = newValue;
    setFormData(updatedData);
  };

  const handleValueChange = (index, newValue) => {
    const updatedData = [...formData];
    updatedData[index].value = newValue;
    setFormData(updatedData);
  };

  const renderInputs = formData.map((item, index) => {
    return (
      <div key={index}>
        <input
          value={item.key}
          onChange={(e) => handleKeyChange(index, e.target.value)}
        />
        <input
          value={item.value}
          onChange={(e) => handleValueChange(index, e.target.value)}
        />
      </div>
    );
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const submitData = formData.reduce((acc, item) => {
      acc[item.key] = item.value;
      return acc;
    }, {});
    console.log('提交数据:', { id: templateId, myData: submitData });
  };

  return (
    <form onSubmit={handleSubmit}>
      {renderInputs}
      <button type="submit">提交修改</button>
    </form>
  );
}

关键注意点 #

• 受控组件必须同时绑定value和onChange，二者缺一不可，才能实现输入内容与状态的同步。
• React状态是不可变的，更新数组状态时必须创建新数组（如使用扩展运算符[...formData]），不能直接修改原数组。
• 循环渲染输入框时必须添加唯一的key属性，避免React警告并提升渲染性能。

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