如何编辑React物料的TextField值？

Question

我有一个表格，里面有一些来自某个国家的数据。数据来自带有Apolo Client的GraphQL API。

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

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

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

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

我使用的是来自react-material的TextField。

​

​

有人能帮我更新它的值吗？提前谢谢你。

Answer 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上调用change字段并按预期传递三个参数首先是要更改的国家/地区属性的名称(本例中为" name“-> 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)}
  ...
/>