反应输入颜色选择器

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的错误，错误消息已经很好地解释了它。我建议您查看它所引用的文档页面，这应该可以帮助您理解问题。