Question

我使用colorPickr构建了三个颜色选择组件。问题是我找不到存储所选颜色的变量以使用它并将其存储到状态中。

我尝试使用文档中提到的事件“保存”：https://github.com/Simonwep/pickr

export default class ColorPicker extends Component {
   componentDidMount(){
        const pickr = Pickr.create({
            el: '.color-picker',
            theme: 'classic',
            swatches: [
                'rgba(244, 67, 54, 1)',
                'rgba(233, 30, 99, 0.95)',
                'rgba(156, 39, 176, 0.9)',
                'rgba(103, 58, 183, 0.85)',
                'rgba(63, 81, 181, 0.8)',
                'rgba(33, 150, 243, 0.75)',
                'rgba(3, 169, 244, 0.7)',
                'rgba(0, 188, 212, 0.7)',
                'rgba(0, 150, 136, 0.75)',
                'rgba(76, 175, 80, 0.8)',
                'rgba(139, 195, 74, 0.85)',
                'rgba(205, 220, 57, 0.9)',
                'rgba(255, 235, 59, 0.95)',
                'rgba(255, 193, 7, 1)'
            ],

            components: {

                // Main components
                preview: true,
                opacity: true,
                hue: true,

                // Input / output Options
                interaction: {
                    hex: false,
                    rgba: false,
                    hsla: false,
                    hsva: true,
                    cmyk: false,
                    input: true,
                    clear: true,
                    save: true
                }
            }
        });

    }


    render(){

        return(

        <Fragment>
        <div  className="color-picker"></div>


        </Fragment>
        )
    }
}

Answer 1

您需要使用事件。例如：

pickr.on('save', (color, instance) => {
    console.log('save', color, instance)
});

如何获得所选颜色

1 个答案: