HTML颜色选择器能记住所选的颜色吗

Question

我正在使用一个颜色选择器来让用户选择背景颜色。我已经实现了，它工作得很好，但问题是，当用户第二次单击颜色选择器时，颜色选择器会重置。基本上，它不会"记住"他们以前选择了什么。

我的代码是：

<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>

Answer 1

请查看https://reactjs.org/docs/glossary.html#controlled-与不受控制的组件

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

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/