从 react-color 库中实现 SliderPicker

Question

我找不到关于如何将 SliderPicker 实现为功能组件的合适示例，有什么建议吗？

import React,{useState} from "react";
import "../Styles/Pixel-editor.scss"
import { HuePicker,SliderPicker } from 'react-color';

function App(){
  return(<div className="App"><SliderPicker/> </div>);
}

Answer 1

您需要一个带有对象的状态，它有一个 hex 属性。然后你可以用 onChangeComplete 属性:

来设置它

const [color, setColor] = React.useState({ hex: "#FFFFFF" });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <SliderPicker
        color={color}
        onChangeComplete={(color) => setColor(color)}
      />
    </div>
  );

https://codesandbox.io/s/polished-resonance-5il68w

从 react-color 库中实现 SliderPicker

Implementing The SliderPicker from react-color library

reactjs

colors

jsx

color-picker

react-color