javascript - HuePicker 滑块不滑动反应颜色

Question

我正在尝试使用 react-color 创建一个 huePicker。当前滑块有效并且正在选择新颜色。我知道这一点是因为我的 console.log。但是，滑块旋钮/指针不与我的鼠标指针一起移动，即滑块不滑动。我不知道这是为什么。有人可以帮我吗？

import React, {useState} from "react";
import Slider from '@material-ui/core/Slider';
import {HuePicker} from 'react-color';
import reactCSS from 'reactcss'
import "./DailyForm.css"

const DailyForm = () => {
  const [colorValue, setColorValue] = useState({r: 10, g: 10, b: 10});

  function colorValueChange (event, newColor) {
    setColorValue(event.rgb);
    console.log(colorValue);
  }

  const styles = reactCSS({
    'default': {
      color: {
        width: '72px',
        height: '28px',
        borderRadius: '2px',
        background: `rgba(${colorValue.r }, ${ colorValue.g }, ${ colorValue.b }, ${ colorValue.a })`,
      }
    },
  });

  return (
    <div className="container">
      <div class = "questionSelection">
        <p class = "questions">
          Pick a color.
        </p>

        <p class = "questions">
          This is your current color:
        </p>

        <div class = "colorContainer">
          <div style = {styles.color} />
        </div>

        <HuePicker class = "colorSlider"
          onChange = {colorValueChange}
        />
      </div>
    </div>
  );
}

export default DailyForm;

标签： javascriptreactjscolorssliderreact-color

Answer 1

我有同样的问题，你可以安装测试版。

npm i react-color@3.0.0-beta.3

或者

yarn add react-color@3.0.0-beta.3

或尝试安装其他版本：https ://www.npmjs.com/package/react-color