我使用来自 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}/>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句