在Fluent UI React中处理TextField更改

问题描述

使用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 };
    });
  };```

解决方法

我认为您想要event.target的{​​{1}}：

value

您还应该注意，在您的const handleChange = e => { setItem(prevItem => { ...prevItem,surname: e.target.value }); }; 版本中，handleChange()是value（仅将事件undefined作为参数传递）。

编辑：现在，我看到您正在使用来自组件安装时的访存响应中的数据设置值e。尽管如此，item的值最初还是不确定的，所以我考虑考虑在item.surname组件的值中添加一个条件：

<TextField />