React 在 onChange 函數中如何更新另一個自定義組件的狀態並傳入一個值？

Question

在 React 應用程序中，當前有一個下拉列表，其中包含一個調用函數的 onChange 事件。 在該功能中（當用戶在 ddl 中選擇不同的選項時）我想要實現的是更新另一個自定義組件並將值傳遞給該組件。

所以在前端有一個簡單的下拉菜單：

    <Dropdown
        value={selectedOption}
        options={dropDownOptions}
        onChange={onChange}
      />

然后有一個 onChange 函數在下拉列表被選中時被觸發：

 const onChange = React.useCallback(
    e => {
      const optionId = e.target.value;
      const optionData = keyedOptions[optionId];

      // refresh DownloadSelector custom component
      // something like this which doesn't work {optionData.id && <DownloadSelector eventId={optionData.id} />} }

此外，我通常可以在文件頂部導入自定義組件，例如：

import { DownloadSelector } from '../../../SearchAndSort/DownloadSelector';

自定義組件在定義它時有一個傳入的值，如下所示：

export const DownloadSelector = ({eventId}) => {

如果整個頁面刷新，自定義DownloadSelector組件將被上傳。 我希望這發生在 onChange 中。

我們如何在 onChange 函數中更新/重新加載/setState/刷新DownloadSelector組件？

Answer 1

const [eventId, setEventId] = React.useState()

const onChange = React.useCallback(() {
  // ....

  // replace newState with a updated value
  setEventId( newState )
}, [])

return <DownloadSelector eventId={eventId} />

Answer 2

在 DownloadSelector 中執行以下操作：

function useForceUpdate(){
    const [value, setValue] = useState(0); // integer state
    return () => setValue(value => value + 1); // update state to force render
}

const DownloadSelector = ({eventId}) => {
  const forceUpdate = useForceUpdate();

  // ....

  return <Dropdown 
          value={selectedOption}
          options={dropDownOptions}
          onChange={onChange}
          forceUpdate={forceUpdate}
        />
}

然后在下拉組件的 onChange 中：

const onChange = React.useCallback(() {
  // ....

  forceUpdate()
}, [])

Answer 3

我的問題的答案是在更改下拉列表（不同的組件）時我想重新呈現的自定義組件中，它是定義在狀態（不是本地讓）的自定義組件DownloadSelector中正在更改的變量，例如：

  const [isMyVar] = useState(false);

然后當isMyVar被更新時，狀態改變並且組件重新渲染。 答案不是（我最初認為的）是在第二個組件的 onChange 事件中包含代碼。 感謝@Hostek 的幫助。