事件处理 - React

Question

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

当我select一个颜色（里面没有图标）悬停后，DoneIcon应该放在里面。总而言之，当一种颜色被 select 编辑时，它应该具有 DoneIcon 并且图标应该从之前 select 编辑的颜色中消失。
当颜色被 selected 时，（其父级）div 和 class="box" 的背景颜色应更改为 selected 颜色。我知道这可以通过事件处理来实现，方法是为将要执行的每种颜色（12 种颜色中的颜色）设置函数 onClick，但是我怎么能只有一个函数来检测来自 props.color 的颜色当 onClick 事件执行并将颜色应用于 box.

的 link

Answer 1

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

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

在你的 parent:

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

事件处理 - React

Event Handling - React

event-handling

dom-events

reactjs

material-ui

react-props

关于重构的思考