如何编辑 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("");

<TextField

className={classes.field}

disabled={disabledField}

label="Name"

value={countryName}

onChange={event => {

  setCountryName(event.target.value);

}}

variant="outlined"

InputLabelProps={{

  shrink: true

}}

/>

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

Answer 4

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