如何编辑 React Material 的 TextField 值？答案

【问题标题】：How to edit the TextField value of React Material?如何编辑 React Material 的 TextField 值？
【发布时间】：2020-12-06 01:20:13
【问题描述】：

我有一个表格，其中包含来自某个国家/地区的一些数据。数据来自GraphQL API 和Apolo Client。

默认情况下，数据是只读的，如果用户想改变值，应该点击编辑按钮。

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

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

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

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

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您的代码几乎没有变化：

在您的 cangeField 函数中，您需要 3 个参数来更改要更改的字段、该字段的国家 ID 所有者以及该字段的新值。要更改您需要的值，首先在国家列表中找到国家，然后更新该字段的值。

const changeField = (field, id, value) => {
  console.log(id, country);
  const newCountryInfo = [...country];
  newCountryInfo.forEach(c => {
    if (c._id === id) {
      c[field] = value;
      setCountry([...newCountryInfo]);
      return;
    }
  });
};

在您的 textInput 中，您调用更改字段并按预期传递三个参数，首先是您要在这种情况下更改的国家/地区属性的名称“名称”-> country.name，其次是国家 ID country._id 和最后是该字段的新值

<TextField
  ...
  onChange={event => changeField('name', item._id, event.target.value)}
  ...
/>

你可以注意到我删除了 ES6 函数 '=>' 之后的大括号，因为在你使用这个大括号时你需要在里面返回

<TextField
  ...
  onChange={event => {
    return changeField('name', item._id, event.target.value);
  }}
  ...
/>

在您的代码中，您忘记了返回，但直接返回更简洁

<TextField
  ...
  onChange={event => changeField('name', item._id, event.target.value)}
  ...
/>

【讨论】：

嘿 Yoandry，这对我来说非常有用，谢谢！！！唯一的区别是，我必须将value={item.name} 更改为defaultValue={item.name}。有什么问题吗？
嘿，vbernal 很高兴帮助你！最好使用 value 道具，语义名称所暗示的'defaultValue'应该只用于输入没有值或在第一次渲染时没有数据的情况，输入的任何更改都会更新value prop 这是标准，如果您使用 defaultValue 而不是 value，您可能会遇到可访问性问题，特别是 NVDA 等工具无法向用户读取正确的值。我不是说 defaultValue 不起作用，我只是发出警报
嘿 Yoandry，谢谢，但如果我让 value 代替 defaultValue，你告诉我的解决方案不起作用。知道为什么吗？再次感谢！！ :))
对不起，vbernal是我的错，我只是更新了changeField函数，因为我们只需要在修改字段时更新国家数组。国家地图内渲染中的另一个提示，您使用项目作为键，但项目是您需要更新为 <Grid key={item._id} container spacing={4}> 的对象