如何在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都将为alpha：a：1。您也可以使用透明。

<CirclePicker onChange={changeColor} color={color}/>