如何编辑 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

问题在这里：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

Answer 3

使用 State 属性作为值const [国家名称, setCountryName] = useState("");<TextFieldclassName={classes.field}disabled={disabledField}label="Name"value={countryName}onChange={event => {&nbsp; setCountryName(event.target.value);}}variant="outlined"InputLabelProps={{&nbsp; shrink: true}}/>在useState("")内部，定义初始值或预定义值。

Answer 4

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