React中点击按钮修改其他元素样式、控制组件显隐的问题咨询

问题修正与最优实现方案 #

你的原有实现思路确实过于复杂，React的声明式开发模式不需要手动操作DOM绑定事件监听，完全可以用更简洁的写法实现需求。

原有代码的问题

• 混淆了原生DOM事件和React合成事件：原生DOM点击事件名是click，而React组件上的onClick是合成事件属性，不需要通过addEventListener绑定
• 手动操作DOM的写法不符合React设计理念，会导致状态和DOM不同步的隐患
• 自定义Hook中没有获取Button DOM实例的入口，无法直接绑定事件

修正后的自定义Hook

import { useState } from 'react';

export default function useVisibility(initialVisibility = 'hidden') {
  const [visibility, setVisibility] = useState(initialVisibility);

  // 暴露操作方法供外部调用
  const show = () => setVisibility('visible');
  const hide = () => setVisibility('hidden');
  const toggle = () => setVisibility(prev => prev === 'visible' ? 'hidden' : 'visible');

  return { visibility, show, hide, toggle };
}

组件内使用示例

import Button from '你的Button组件引入路径';
import CalendarIcon from '你的CalendarIcon组件引入路径';
import useVisibility from '你的useVisibility引入路径';

function MyComponent() {
  // 按需获取需要的方法，要点击后显示就取show方法
  const { visibility, show } = useVisibility();

  return (
    <>
      {/* 直接在React组件上通过onClick绑定触发方法 */}
      <Button onClick={show}>GO</Button>
      {/* 注意你原代码这里少了一个双引号，已修正 */}
      <CalendarIcon id="calendar" visibility={visibility} />
    </>
  );
}

如果需要点击按钮切换显示/隐藏，把show换成toggle方法即可。

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