如何使用已预定义的值编辑TextField值

Question

我有一份表格，里面有一个国家的数据。默认情况下，数据是只读的，如果用户希望更改值，请单击“编辑”按钮。

问题是我无法在TextInput中编辑值，默认情况下，value值已经预先定义好了。我试图通过onChange()编辑这个值，但是它不起作用。

输入字段中没有显示我输入的所有内容。

下面是我的代码，我输入了CodeSandBox：https://codesandbox.io/s/polished-water-muq69?file=/src/App.js

我使用的是来自TextField的react-material。

​

​

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

Answer 1

正如其他人所指出的，问题在于您需要onChange和value在状态中指向相同的值/变量。

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

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

在每个TextField中，根据字段的不同，添加如下内容

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

检查这个代码框链接

Answer 2

我不是一个反应专家，但似乎React组件正在覆盖所有正在键入的更改。您可以在开发控制台上看到它，只需删除value=“巴西”并尝试键入某些内容，value=“巴西”就会弹回输入标记。我可以建议用占位符代替这个值。这样，用户仍然可以看到旧的值，并且能够键入新的值。

Answer 3

将国家财产用作值

countryName，setCountryName = useState("")；

<TextField
className={classes.field}
disabled={disabledField}
label="Name"

value={countryName}

onChange={event => {
  setCountryName(event.target.value);
}}
variant="outlined"
InputLabelProps={{
  shrink: true
}}
/>

在useState("")中，定义初始值或预定义值。