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 的帮助。