从React-Color库实现sliderpicker

发布于 2025-02-03 03:08:20 字数 285 浏览 7 评论 0原文

我找不到有关如何实现滑动器作为功能组件的正确示例，有什么建议吗？

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

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

原文

I can't find a proper example on how to implement the SliderPicker as a functional component, any suggestions?

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

预谋 2025-02-10 03:08:20

您需要一个具有对象的状态，该状态具有 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>
  );

htttps：htttps：// codesandbox。 io/s/s/抛光 - 谐音-5il68w

You need a state with object, which has a hex property. Then you can set it with onChangeComplete property:

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

回复收藏 0 原文

~没有更多了~