如何在 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}/>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章