Javascript 如何编辑反应材料的文本字段值？

我有一个表格，里面有一些来自某个国家的数据。数据来自一个带有aplo客户端的

graphqlapi

默认情况下，数据是只读的，如果用户想要更改值，应单击编辑按钮

问题是我无法编辑

TextInput

中的值，默认情况下，该值已预定义。我试图通过

onChange（）

编辑该值，但不起作用

输入字段中不会显示我键入的所有内容

这是我的代码，我放在代码沙盒中：

我正在使用

react material

中的

TextField

---

有人能帮我更新这些值吗？提前感谢您。

您的代码几乎没有变化：

在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上，您调用change字段，并按预期传递三个参数：第一个是要在本例中更改的country属性的名称“name”->country.name，第二个是country ID country.\u ID，最后一个是字段的新值

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

changeField（'name'，item.\u id，event.target.value）}
...
/>

您可以注意到，我在ES6函数“=>”之后删除了大括号，因为在使用此大括号时，您需要返回内部

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

{
返回changeField（'name'，item.\u id，event.target.value）；
}}
...
/>

在您的代码中，您忘记了返回，但直接返回会更干净

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

changeField（'name'，item.\u id，event.target.value）}
...
/>

嘿，Yoandry，这对我来说太完美了，谢谢！！！唯一的区别是，我必须为

defaultValue={item.name}

更改

value={item.name}

。有什么问题吗？嘿，我很高兴能帮助你！最好使用值道具，如语义名称所示，“defaultValue”应仅用于输入没有值的情况，或在没有数据的第一次渲染中，输入上的任何更改都将更新值。这是标准值，如果使用defaultValue而不是该值，则可能会出现可访问性问题，特别是像NVDA这样的工具无法向用户读取正确的值。我不是说defaultValue不起作用，我只是抛出一个alertHey Yoandry，谢谢你，但是如果我用

value

代替

defaultValue

，你告诉我的解决方案就不起作用了。你知道为什么吗？再次感谢！！：）很抱歉，vbernal是我的错，我只是更新了changeField函数，因为我们只需要在修改字段时更新国家/地区数组。在国家地图内部的渲染中的另一个提示是，您使用项目作为键，但项目是需要更新到