时间戳

首页 > 解决方案 > HTML 颜色选择器可以记住选定的颜色吗？

html - HTML 颜色选择器可以记住选定的颜色吗？

问题描述

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

我的代码是：

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

标签： htmlreactjs

解决方案

请看一下https://reactjs.org/docs/glossary.html#control-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/

推荐阅读