时间戳

首页 > 解决方案 > 事件处理 - 反应

reactjs - 事件处理 - 反应

问题描述

我有一个popover里面有Colors不同颜色的组件。还有一个图标 DoneIcon（暂时）放置在Colors组件内。我想要实现的是：

  1. 当我选择一种颜色（里面没有图标）悬停后，DoneIcon应该放在里面。为了概括选择颜色时，它应该具有DoneIcon并且图标应该从先前选择的颜色中消失。
  2. 选择颜色时，（其父级）的背景颜色div应class="box"更改为所选颜色。我知道这可以通过事件处理来实现，方法是为将要执行的每种颜色（共 12 种颜色）设置函数onClick，但是我如何才能只有一个函数从事件执行props.color时检测颜色onClick并将颜色应用于box.

这是CodeSandbox的链接

标签： reactjsevent-handlingmaterial-uidom-eventsreact-props

解决方案

将选定的道具添加到您的颜色组件

function Colors(props) {
  return (
    <div
      onClick={props.setColor(props.color)}
      className="colors"
      style={{ backgroundColor: props.color }}
    >
      {props.selected && <DoneIcon fontSize="small" />}
    </div>
  );
}

在你的父母中：

const [color, setColor] = useState("");
...

<Colors selected={color === "red"} setColor={setColor} color="red" />

注意：你可能想要重构这个解决方案，但是这样的东西应该可以工作。

关于重构的思考

映射颜色列表

const [selectedColor, setSelectedColor] = useState('')

['red', 'blue', 'green'].map(color => {
  <div onClick={() => setSelectedColor(color)} className="colors" style={{ backgroundColor: color }}>
    {selectedColor === color && <DoneIcon fontSize="small" />}
  </div>
}

工作：codesandbox

重构为使用颜色组件：codesandbox

推荐阅读