反应输入颜色选择器

Question

我不明白，输入颜色类型是如何工作的。

我正在尝试使用颜色选择器并将值放入状态变量“颜色”中。

const [color, setColor] = useState(false);
const colorPicker = () => {
    console.log("colorPicker", color.target);
    return(
        <input type="color" value={color} onChange={setColor}/>
    );
}

但这只会在控制台中给我大量的 javascript 对象，当我尝试查看例如 color.target 时会引发错误：

警告：出于性能原因，此合成事件会被重复使用。如果 你看到这个，你正在访问属性target 释放/无效的合成事件。这设置为空。如果你必须 保留原始合成事件，使用 event.persist()。看 https://fb dot me/react-event-pooling 了解更多信息。

Answer 1

onChange 事件处理程序接收一个事件对象作为参数。

此事件对象包含选定的颜色为event.target.value，就像常规文本输入一样。

---

考虑到这一点，以下将允许您保留所选颜色：

const ColorPicker = () => {
  const [color, setColor] = useState(null);

  console.log("colorPicker", color);

  return (
    <input type="color" value={color} onChange={e => setColor(e.target.value)} />
  );
}

---

关于您在尝试访问event.target 时看到的错误，错误消息已经很好地解释了它。我建议您查看它所引用的文档页面，这应该可以帮助您理解问题。