1

使用 Fluent UI React，我在 TextField 中显示来自 AppSync API 的一些数据。我希望能够从 API 中显示联系表单的文本。然后我想编辑该文本并单击一个按钮将其发布回 AppSync API。

如果我自己使用 TextField 组件，我可以使用挂钩将变量设置为 AppSync API 调用的结果，然后让 TextField 组件读取来自我使用挂钩设置的变量的值。然后，我可以根据自己的喜好编辑该文本，并且很好。

我遇到的问题是，如果我想对 TextField 进行编辑并使用我的钩子设置它们，我就会失去对 TextField 的关注。为此，我使用了 TextField 的 onChange 属性。我可以很好地设置变量，但我必须继续点击返回输入窗口。

关于如何保持专注的任何想法？

import React, { useEffect, useState } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import * as queries from '../../graphql/queries';
import { Fabric, TextField, Stack } from '@fluentui/react';

const PhoneEntryFromRouter = ({
  match: {
    params: { phoneBookId },
  },
}) => PhoneEntry(phoneBookId);

function PhoneEntry(phoneBookId) {
  const [item, setItem] = useState({});

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await API.graphql(
          graphqlOperation(queries.getPhoneBookEntry, { id: phoneBookId })
        );
        setItem(response.data.getPhoneBookEntry);
      } catch (err) {
        console.log(
          'Unfortuantely there was an error in getting the data: ' +
            JSON.stringify(err)
        );
        console.log(err);
      }
    }
    fetchData();
  }, [phoneBookId]);

  const handleChange = (e, value) => {
    setItem({ ...item, surname: value });
  };

  const ContactCard = () => {
    return (
      <Fabric>
        <Stack>
          <Stack>
            <TextField
              label='name'
              required
              value={item.surname}
              onChange={handleChange}
            />
          </Stack>
        </Stack>
      </Fabric>
    );
  };

  if (!item) {
    return <div>Sorry, but that log was not found</div>;
  }

  return (
    <div>
      <ContactCard />
    </div>
  );
}

export default PhoneEntryFromRouter;

编辑

我已更改 handleChange 函数以使用 prevItem。对于此事件，它确实接受事件和值。如果您记录该值，则它是当前值并且似乎有效。

尽管发生了变化，但我仍然看到失去焦点，这意味着我每次只能进行一键编辑。

    setItem((prevItem) => {
      return { ...prevItem, surname: e.target.value };
    });
  };```
4

1 回答 1

2

我想你想要event.target的value：

const handleChange = e => {
    setItem(prevItem => { ...prevItem, surname: e.target.value });
};

您还应该注意到，在您的handleChange(), valueis版本中undefined（仅将事件e作为参数传递）。

编辑：现在我看到您正在item使用来自组件安装上的获取响应的数据设置值。尽管如此，item.surname最初的值是未定义的，所以我会考虑在<TextField />组件的值中添加一个条件：

value={item.surname || ''}
于 2020-08-29T15:44:53.200 回答