React事件处理：通过单个函数实现颜色选择的状态同步需求

嘿，别担心，完全不用写12个重复的 onClick 函数！咱们用状态管理就能轻松搞定，一个函数就够了，思路很简单，我给你一步步拆解：

核心思路 #

通过在父组件中维护一个「当前选中颜色」的状态，所有颜色组件共享这个状态：

1. 点击任意颜色时，用同一个函数更新这个状态
2. 每个颜色组件根据状态判断自己是否被选中，从而决定是否显示 DoneIcon
3. 父级的 box 元素直接绑定这个状态作为背景色

具体实现步骤 #

1. 在父组件中添加状态和统一的点击处理函数

首先在包含 box 和 popover 的父组件里，用 useState 存储当前选中的颜色，然后写一个接收颜色参数的处理函数：

import { useState } from 'react';
import Colors from './Colors';
import DoneIcon from './DoneIcon';

function ColorPicker() {
  // 初始化选中的颜色（可以设为默认选中的颜色，或者 null 表示初始无选中）
  const [selectedColor, setSelectedColor] = useState('#your-default-color');

  // 统一的点击处理函数，接收点击的颜色作为参数
  const handleColorClick = (clickedColor) => {
    setSelectedColor(clickedColor);
  };

  return (
    {/* 给 box 绑定背景色，直接用选中的颜色状态 */}
    <div className="box" style={{ backgroundColor: selectedColor }}>
      <div className="popover">
        {/* 遍历你的12个颜色，给每个 Colors 组件传递必要的 props */}
        {[
          '#ff0000', '#00ff00', '#0000ff', 
          '#ffff00', '#ff00ff', '#00ffff',
          '#800000', '#008000', '#000080',
          '#808000', '#800080', '#008080'
        ].map((color) => (
          <Colors
            key={color}
            color={color}
            onClick={() => handleColorClick(color)}
            // 传递是否选中的判断结果
            isSelected={selectedColor === color}
          />
        ))}
      </div>
    </div>
  );
}

2. 修改 Colors 组件，根据状态控制 DoneIcon 显示

在你的 Colors 组件里，不再硬编码 DoneIcon，而是根据 isSelected props 来决定是否渲染：

function Colors({ color, onClick, isSelected }) {
  return (
    <div 
      className="color-component"
      style={{ backgroundColor: color }}
      onClick={onClick}
    >
      {/* 只有当前选中的颜色组件才显示 DoneIcon */}
      {isSelected && <DoneIcon />}
    </div>
  );
}

为什么这样可行？ #

• 每次点击颜色组件，都会把对应的颜色值传给 handleColorClick，更新父组件的 selectedColor 状态
• 状态更新后，所有 Colors 组件都会重新渲染，根据 isSelected 判断自己是否显示图标，自然就实现了「仅当前选中项显示图标」的需求
• 父级 box 的背景色直接绑定状态，状态变了背景色自动跟着切换，完全不用额外操作

这样不管你有多少个颜色，都只需要这一个处理函数，代码简洁还容易维护～

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