javascript - 如何在 ColorPicker 中设置颜色
问题描述
我使用来自 react-color 的 CirclePicker。我有包含表单的模态窗口,ColorPicker 在哪里。我以十六进制格式(#123123)向我的表单发送有关当前颜色的信息。我想在用户打开表单时设置选定的颜色。如何选择彩色圆圈?
const [settingWidget, setSettingWidget] = useState({
color: '#f44336', //default
});
function changeColor(colorChoice, event){
setSettingWidget({
color: colorChoice.hex
});
}
<div>
<Modal
visible={visible}
title='Edit'
okText='Save'
cancelText='Cancel'
onCancel={onCancel}
onOk={() => {
form.resetFields();
onSave(values);
}}
>
<Form
{...formItemLayout}
layout={formLayout}
form={form}
initialValues={{
colorPicker: settingWidget.color,
}}
>
<Form.Item />
<Form.Item name='colorPicker' label='Color'>
<CirclePicker onChange={changeColor} />
</Form.Item>
</Form>
</Modal>
</div>
解决方案
您可以设置颜色属性。它将使用该特定颜色进行初始化。
Color 接受十六进制颜色“#333”的字符串或 rgb 或 hsl 值的对象 { r: 51, g: 51, b: 51 } 或 { h: 0, s: 0, l: .10 }。rgb 和 hsl 也将采用 aa: 1 值作为 alpha。你也可以使用透明的。
<CirclePicker onChange={changeColor} color={color}/>
推荐阅读
- office-js - Office.context.mailbox.item.body.setAsync 在 Mac Outlook 中为收件人中断图像
- c++ - 需要解释这个非常简单的程序中的一些行为
- java - Java:从子类获取超类的实例
- list - Kotlin/Firebase 获取对象列表
- .net - 为什么 NumberStyles.Any 不允许使用百分号?
- scala - 错误外壳:397 - 无法在 hadoop 二进制路径中找到 winutils 二进制文件
- fasterxml - jackson-dataformat-yaml 中的snakeyaml.util 包移到了哪里
- macos - Fabric 链码实例化失败
- android - 如何在 Android OpenCv 中加载 cascadeClassifier
- internationalization - Web SQL 查询返回的行数与 SQL 企业管理器查询不同