ColorPicker 颜色选择器

取色器。

何时使用

需要获取颜色色值时。

代码演示

ColorPicker

颜色选择器。

import React from 'react';
import ReactDOM from 'react-dom';
import { ColorPicker } from 'choerodon-ui/pro';
​
ReactDOM.render(
  <ColorPicker defaultValue="#f1c7f2" />,
  document.getElementById('container')
);
​
​

受控颜色输入框

受控输入框

​
import React from 'react';
import ReactDOM from 'react-dom';
import { ColorPicker } from 'choerodon-ui/pro';
​
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '#0000ff',
    };
  }
​
  handleChange = (value, oldValue) => {
    console.log('[newValue]', value, '[oldValue]', oldValue);
    this.setState({
      value,
    });
  }
​
  render() {
    return <ColorPicker value={this.state.value} onChange={this.handleChange} />;
  }
}
​
ReactDOM.render(
  <App />,
  document.getElementById('container')
);

数据源

绑定数据源。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, ColorPicker } from 'choerodon-ui/pro';
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log('[dataset newValue]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
}
​
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'color', type: 'color', defaultValue: '#00ff00', required: true },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
​
  render() {
    return <ColorPicker dataSet={this.ds} name="color" />;
  }
}
​
ReactDOM.render(
  <App />,
  document.getElementById('container')
);

API