HTML 颜色选择器可以记住选定的颜色吗？答案

【问题标题】：Can a HTML color picker remember the selected color?HTML 颜色选择器可以记住选定的颜色吗？
【发布时间】：2021-09-15 05:41:31
【问题描述】：

我正在使用颜色选择器来让用户选择背景颜色。我已经实现了它并且工作正常，但问题是当用户第二次单击颜色选择器时，颜色选择器会重置。它基本上不会“记住”他们之前选择的内容。

我的代码是：

<label className='optionSelectors'>BACKGROUND COLOR: </label><br/>
<input type='color' value='#FFFFFF' onChange={this.handleBgColorChange}/>

所以当用户第一次点击颜色选择器时，它默认为白色。假设用户选择了紫色，但经过反思，他们想要更浅或更深的阴影，所以他们再次打开颜色选择器 - 它变回白色。

我也尝试删除 value='#FFFFFF 属性，但它仍然默认为白色？

编辑：我使用的是React，函数handleBgColorChange()如下：

handleBgColorChange(e) {
  document.getElementById('Collage').style.backgroundColor = e.target.value
}

相关的输入只是在普通的 HTML 中，它不是复杂渲染或任何花哨的东西的一部分。代码字面意思是：

<div>
  <label className='optionSelectors'>BACKGROUND COLOR: </label><br/>
  <input type='color' value='#FFFFFF' onChange={this.handleBgColorChange}/>
</div>

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… 可能有用，监听颜色的变化然后根据选择的颜色更新值
请输入可执行代码
无法复制。除非您重新加载页面，否则颜色是最后选择的输入颜色。就像普通的文本输入一样。
另外请标记您用于{this.handleBgColorChange}的框架
编辑反映

标签： html reactjs

【解决方案1】：

请看https://reactjs.org/docs/glossary.html#controlled-vs-uncontrolled-components

并且在大多数情况下使用受控。例如：

import React, { useState, useCallback } from 'react';

function App() {
  const [color, setColor] = useState('#FFFFFF');
  const handleBgColorChange = useCallback(({ target: { value } }) => {
    setColor(value);
  }, []);
  return (
    <div>
      <label>BACKGROUND COLOR:</label>&nbsp;
      <input type='color' value={color} onChange={handleBgColorChange} />
      <hr />
      <div class="collage" style={{ backgroundColor: color }}></div>
    </div>
  );
}

https://jsfiddle.net/m9z1dajh/

【讨论】：