javascript - 如何编辑 TextField 值，该值已预先定义

Question

我有一个表格，其中包含来自某个国家/地区的一些数据。默认情况下，数据是只读的，如果用户要更改值，请单击编辑按钮。
问题是我无法编辑 TextInput 中的值，默认情况下，值 value已经预先定义。我尝试通过 onChange() 编辑值，但它不起作用。
我输入的所有内容都不会出现在“输入”字段中。
这是我的代码，我放在 CodeSandBox 中:https://codesandbox.io/s/polished-water-muq69?file=/src/App.js
我正在使用 TextField来自 react-material .

有人可以帮我更新那个值吗？先感谢您。

Answer 1

正如其他人所说，问题是您需要 onChange和 value指向相同的值/状态变量。
更进一步，我将清除 state 中的所有这些变量并仅使用一种方法来更改属性(例如，如果您有许多字段并且代码变得足够长)

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

并在每个 TextField您根据字段添加以下内容

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

查询 this codesandbox link