react-color 颜色拾取器与input框绑定 SketchPicker
效果：
说明：
input框里面输入#开头的颜色（如：#fffff）,也会识别，选择颜色也会回填到input框里面，
代码：
import React,{Component} from 'react;
import { Popover, Input, Icon, Form, Row, Col, Spin } from 'antd';
import { SketchPicker } from 'react-color';
const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 16 } };
class TextClor extends Component {
constructor(){
super()
this.state = {
loading:false,
color: ''
}
}
onChange = (value) => {
this.setState({
color : value.color
})
}
handleonChange(value){
this.setState({
color : value.color
})
}
render() {
const {getFieldDecorator} = this.props.form;
const { loading, color} = this.state;
const colorOption = (
<Popover
trigger="click"
placement="bottom"
content={<SketchPicker
color={color}
onChangeComplete={({ hex }) => this.onChange({ color: hex })}
/>}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<div style={{
height: 20, width: 20,
background: color || '#fff',
border: '1px solid #E6E6E6',
borderRadius: '3'
}}/>
<Icon type="caret-down" style={{}}/>
</div>
</Popover>
);
return (
<div>
<Form style={{width:540}}>
<Spin spinning={loading}>
<Row gutter={24}>
<Col span={24}>
<Form.Item label='主标题色号'
{...formItemLayout} >
<Input value={color}
onChange={e =>this.handleonChange({ color: e.target.value })}
placeholder="请填写颜色，以#开头，如：#f0f0f0"
addonAfter={colorOption}
style={{ width: '100%' }}/>
</Form.Item>
</Col>
</Row>
</Spin>
</Form>
</div>
);
}
}
export default Form.create()(TextClor);
