解决自定义 Antd Form 表单控件 获取值的问题

前置条件：React 16.8+ 项目、引用 Antd UI 组件库

• 问题：

  自定义 Form 表单控件时，表单提交获取不到控件值
  

• 解决思路：

  自定义表单时，经常会封装一些复杂的控件
  然而 像 Input 这样的输入控件，不直接作为 Form.Item 的子元素的时候，值就会获取不到。
  例如: 使用 Popover 包裹 Input 组件的时候。
  
  重点在 给 Input 绑定 props，使其成为受控组件，props 包含 value 属性 和 onChange 方法。
  通过 props.onChange 方法为控件更新值。可以参考受控组件的实现方式。
  

• 示例：

  import React, { useState, useEffect } from "react";
  import { Form, Popover, Input, Row, Col, Button, message } from "antd";
  import { ChromePicker } from "react-color";
  import "./styles.css";
  
  // 自定义控件
  const ColorPicker = (props) => {
    const { defaultColor = "#000000" } = props;
    const [color, setColor] = useState(defaultColor);
    const onChangeComplete = (value, event) => {
      setColor(value.hex);
      props.onChange(value.hex);
    };
  
    useEffect(() => {
      props.onChange(color);
    }, []);
  
    return (
      <Popover
        content={
          <ChromePicker color={color} onChangeComplete={onChangeComplete} />
        }
      >
        <Input
          {...props}
          readOnly
          style={{ width: 125 }}
          addonAfter={
            <div style={{ width: 15, height: 15, backgroundColor: color }}></div>
          }
        />
      </Popover>
    );
  };
  
  // 使用控件
  function App() {
    const [form] = Form.useForm();
    const onFinish = (values) => {
      message.success(values.color);
    };
    return (
      <div className="App">
        <Form layout="inline" form={form} onFinish={onFinish}>
          <Form.Item label="Color" name="color">
            <ColorPicker />
          </Form.Item>
          <Form.Item>
            <Row gutter={[10, 0]}>
              <Col>
                <Button onClick={() => form.resetFields()}>Reset</Button>
              </Col>
              <Col>
                <Button htmlType="submit">Submit</Button>
              </Col>
            </Row>
          </Form.Item>
        </Form>
      </div>
    );
  }
  
  export default App;