如何在 ColorPicker 中设置颜色

Question

我使用来自 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>

Answer 1

您可以设置颜色属性。它将使用该特定颜色进行初始化。Color 接受十六进制颜色 '#333' 的字符串或 rgb 或 hsl 值的对象 { r: 51, g: 51, b: 51 } 或 { h: 0, s: 0, l: .10 }。rgb 和 hsl 也将采用 aa: 1 的 alpha 值。您也可以使用透明。<CirclePicker&nbsp;onChange={changeColor}&nbsp;color={color}/>