输入元素没有只读属性，但字段仍然不可编辑[关闭]

Question

我正在 React 创建一个表单，并且有从服务器数据填充的字段。这些字段应该向用户显示当前的内容，并允许他们在提交表单时编辑数据。但是，当我尝试在输入字段中键入内容时，没有任何反应。文本可选择但不可更改。

这可能是因为我用状态变量中存储的数据填充了字段，因此它保留了从服务器获取的内容的永久值？

这部分代码是负责读取服务器数据并设置状态变量的函数，然后将状态变量传递给Form组件。

const [templateId, setTemplateId] = useState("");
const [templateData, setTemplateData] = useState([]);

function mkForm(selection) {
    if(selection !== "newTemplate"){
        fetch(`http://localhost:3000/custom/${selection}`)
        .then((response) => response.json())
        .then((data)=>{
            setTemplateId(data.id)
            setTemplateData(Object.entries(data.myData));
        })
    } else{
        setTemplateId("");
        setTemplateData([]);
    }
}

这是接收道具的 Form 组件，这部分仅显示从 templateData 道具创建输入字段的代码。 templateId 输入字段在组件的主返回语句中返回，但它几乎是相同的。

function Form({templateId, templateData}) {
    const showData = templateData.map((item)=>{
        return(
            <div onChange={foo}>
                <input value={item[0]}/> <input value={item[1]} />
            </div>
        )
   })
   ... etc.
   ... etc.
}

我更改了一些变量名称以显示相关的状态变量和道具。

编辑：我可能误解了“调试”的含义，但我认为没有任何调试信息可以共享，因为我的问题不会引发任何错误。一切都按其预期进行，问题似乎仅在于我对标签的“值”属性的理解。我期望“值”属性的行为类似于默认值（而不是持久值），并且我假设输入字段能够接受新值来替换它。我还没有找到一种方法来获得我想要的行为。

Answer 1

当您在 React 中设置

value

字段的

input

字段时，

input

字段将始终保留该值，因此对您来说，它会显得不可编辑。

有两种可能的解决方案。

使用

defaultValue

如果您同意不使用输入字段的更改值：

<input defaultValue={someValue} />

有关更多详细信息，请参阅不受控制的组件。

添加

onChange

活动

您很可能希望使用您编辑的值，因此在这种情况下：

<input value={someValue} onChange={handleChange} />

在这种情况下，需要编写您的

handleChange

方法，以便在更改时更新您的

value

。

请参阅受控组件以供参考。