React中onChange事件触发时如何更新自定义组件并传值

你在onChange回调内直接编写<DownloadSelector />的JSX代码完全无效：React是状态驱动视图的框架，事件回调内生成的临时JSX不会被插入页面渲染树，只有组件return输出的、与状态绑定的JSX才会响应数据变化触发重渲染。你当前没有把下拉选中的参数存入组件状态，自然选择下拉项后无法触发自定义组件更新。

• 第一步：定义状态存储需要传递的参数
  在组件顶层用useState定义状态，存储选中项对应的eventId，作为驱动自定义组件更新的数据源：

  // 组件顶部声明状态，初始值可以按业务需求调整
  const [currentEventId, setCurrentEventId] = React.useState(null);
  

  如果你已经有绑定下拉框值的selectedOption状态，记得在onChange里同步更新该状态，避免下拉框选中值不回显。

• 第二步：修正onChange回调逻辑
  不要在回调里直接写渲染组件的代码，选中下拉项时只需要更新上面定义的状态即可，状态变更后React会自动触发重渲染：

  const onChange = React.useCallback(
    e => {
      const optionId = e.target.value;
      const optionData = keyedOptions[optionId];
      // 更新状态，将最新的eventId存入state
      setCurrentEventId(optionData?.id);
      // 如果原有selectedOption状态未做双向绑定，这里补充更新
      // setSelectedOption(optionId);
    },
    [keyedOptions] // 补全useCallback依赖项，避免闭包拿到旧值
  );
  

• 第三步：在渲染树中挂载自定义组件
  将DownloadSelector写在组件return的JSX结构中，把存储的currentEventId作为props传入。状态变更时，React会自动给组件传递新的props，触发组件重渲染执行更新逻辑：

  return (
    <div className="page-container">
      {/* 原有下拉框组件保持不变 */}
      <Dropdown
        value={selectedOption}
        options={dropDownOptions}
        onChange={onChange}
      />
  
      {/* 自定义组件放在渲染树内，靠状态控制渲染和传参 */}
      {currentEventId && <DownloadSelector eventId={currentEventId} />}
    </div>
  );
  

如果需要下拉切换时完全重置DownloadSelector的内部状态（比如清空组件内的表单、缓存请求、临时变量），实现和整页刷新一致的重载效果，可以给组件加key属性，key值变化时React会直接卸载旧组件、重新挂载全新的组件实例：

{currentEventId && <DownloadSelector key={currentEventId} eventId={currentEventId} />}

• 所有需要渲染到页面的组件必须放在组件return的JSX树中，不要在事件回调、普通函数里直接写JSX试图插入页面
• 如果DownloadSelector内部用useEffect监听eventId变化执行业务逻辑，记得把eventId加到useEffect的依赖数组中
• useCallback、useEffect的依赖项必须补全用到的外部变量，避免闭包问题导致拿到旧数据

内容的提问来源于stack exchange，提问作者Catto