處理 Fluent UI React 中的 TextField 更改

Question

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

Answer 1

我想你想要event.target的value ：

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

您還應該注意到，在您的handleChange()版本中， value undefined （只有事件e作為參數傳遞）。

編輯：現在我看到您正在使用來自組件安裝的 fetch 響應的數據設置值item 。 盡管如此， item.surname的值最初是未定義的，所以我會考慮在<TextField />組件的值中添加一個條件：

value={item.surname || ''}