Javascript 如何编辑文本字段值，该值已预定义

我有一个表格，里面有一些来自某个国家的数据。默认情况下，数据是只读的，如果用户想要更改该值，请单击编辑按钮

问题是我无法编辑

TextInput

中的值，默认情况下，值

value

已经预定义。我试图通过

onChange（）

编辑该值，但不起作用

输入字段中不会显示我键入的所有内容

这是我的代码，我放在代码沙盒中：

我正在使用

react material

中的

TextField

---

有人能帮我更新这些值吗？提前谢谢。

我不是React专家，但React组件似乎覆盖了正在键入的所有更改。您可以在开发人员控制台上看到它，只需删除value=“brazil”并尝试键入一些内容，value=“brazil”将弹出到输入标记。

---

我可以建议用占位符替换该值。这样，用户仍然可以看到旧值，并且可以键入新值。

使用状态属性作为值

const[countryName，setCountryName]=useState（“”）

{
setCountryName（event.target.value）；
}}
variant=“概述”
输入道具={{
心理医生：是的
}}
/>

在useState（“”）中定义初始值或预定义值。

问题在于：

value={item.data.Country[0].name}

无论您在

value

属性中设置了什么，都将保留在该属性中。因此，不要在这里传递API响应，而是在其中传递一个状态值，并在输入值更改时更新该状态（双向数据绑定）。它将解决这个问题

您必须进行的更改：

const [countryName, setCountryName] = useState("");

onChange={event => {
  setCountryName(event.target.value);  // This will update the state
}}
value={countryName}  // updated state value is used here

---

正如其他人所说，问题在于您需要

onChange

和

value

指向状态中的相同值/变量

作为进一步的步骤，我将清除状态中的所有这些变量，并仅使用一个方法来更改属性（例如，如果您有许多字段，并且代码足够长）

在每个

TextField

中，根据字段添加如下内容

  onChange={event => {
    changeField("name", event.target.value);
  }}

---

检查

非常感谢Apostolos，这对我来说是完美的工作！！谢谢你给我这个方法的提示，它很好，我还没想过嘿，梅亚克，问题是当我这么做的时候，封地是空的value@vbernal对于初始值使用

defaultValue

Hey Pushparmar，当我这样做时，问题是字段的值为空。嘿，Vlad，上面有答案，谢谢你的帮助。正如我所说，我不是反应专家。我知道有比我更好的解决办法。谢谢

  const changeField = (name, value) => {
    let newCountryInfo = [...countryInfo];
    newCountryInfo[0].data.Country[0][name] = value;
    setCountry(newCountryInfo);
  };

  onChange={event => {
    changeField("name", event.target.value);
  }}