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

Posted 2023-02-22

【中文标题】如何编辑 TextField 值，该值已预先定义

【英文标题】：How to edit the TextField value, with the value is already pre defined

【发布时间】：2020-11-25 07:39:19

【问题描述】：

我有一个表格，其中包含来自某个国家/地区的一些数据。默认情况下，数据是只读的，如果用户想改变值，点击编辑按钮。

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

我输入的所有内容都不会出现在输入字段中。

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

我正在使用来自react-material 的TextField。

有人可以帮我更新它的价值观吗？提前谢谢你。

【参考方案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);
  

查看this codesandbox link

【讨论】：

非常感谢 Apostolos，这对我来说非常有用！！感谢您对这种方法的提示，非常好，我没有考虑过。;）

【参考方案2】：

问题就在这里：

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

您在value 属性中设置的任何内容都将保留在该属性中。因此，不是在此处传递您的 API 响应，而是在其中传递一个状态值，并在输入值更改时更新该状态（2 路数据绑定）。它会解决这个问题。

你必须做出的改变：

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

onChange=event => 
  setCountryName(event.target.value);  // This will update the state

value=countryName  // updated state value is used here

【讨论】：

嘿 Mayank，我这样做时的问题是，该字段带有空值

@vbernal 用于初始值使用 defaultValue

【参考方案3】：

使用 State 属性作为值

const [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("") 内部，定义初始值或预定义值。

【讨论】：

嘿 Pushparmar，我这样做时的问题是，该字段带有空值。

【参考方案4】：

我不是 React 专家，但似乎 React 组件覆盖了所有正在输入的更改。您可以在开发控制台上看到它，只需删除 value="brazil" 并尝试输入一些内容，value="brazil" 将弹出回输入标签。 我可以建议用占位符替换值。这样，用户仍然可以看到旧值，并且可以输入新值。

【讨论】：

嘿弗拉德，上面有答案，谢谢你的帮助。

正如我所说，我不是反应专家。我知道有比我更好的解决方案。谢谢