JavaScript, React: создание кнопки с помощью ColorPicker

Question

Я хочу создать кнопку с некоторым текстом, а также должен отображать последний выбранный цвет (показано на рисунке ниже).

При нажатии на него следует запустить ColorPicker.Как этого достичь?

Answer 1

Реактивная версия проверить это:

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      color: []
    };
  }

  ItemChecked(e){
     var tValue = e.target.value;
     this.setState({ color: tValue });
  }  

  render() {
    return (
      <div>
      <label>
        <div class="result" style={{backgroundColor:this.state.color}}></div>
        <input type="color" id="color-picker" ref="color-value" onChange={this.ItemChecked.bind(this)} />  
        <span class="select"></span> 
      </label>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

css

h1, p {
  font-family: Lato;
}

.result {
  border: 1px solid #333;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

#color-picker {
  display: none;
}

.select {
  cursor: pointer;
  position: absolute;
  left: 65px;
  top: 27px;
}

.select:before{
    content: "▼";
}

https://stackblitz.com/edit/react-xx2pjw?file=index.js

Answer 2

Вам нужно использовать сессию или куки, чтобы получить последний выбранный цвет.Пока это то, что я закончил.

document.getElementById('color-picker').addEventListener('change', function(){
      var color = document.getElementById('color-picker').value;
      document.getElementById('color-holder').style.backgroundColor = color;
      document.getElementById('color-holder').style.borderColor = color;
    });

.mother-div{
        position: relative;
        width: 80px;
      }
      .color-holder{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid black;
        display: inline-block;
      }
      i {
        border: solid black;
        height: 10px;
        width: 10px;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
        position: absolute;
        right: 0px;
        top: 12px;
        border-color: grey;
        }
      .down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        }

<div class="mother-div">
      <label>
        <div class="color-holder" id='color-holder'></div>
        <i class="down"></i>
        <input type="color" style="display:none;" id="color-picker">
      </label>
    </div>