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

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

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

解决思路：

自定义表单时，经常会封装一些复杂的控件，然而 像 Input 这样的输入控件，不直接作为 Form.Item 的子元素的时候，值就会获取不到。例如 使用 Popover 包裹 Input 组件的时候。

重点在 给 Input 绑定 props，使其成为受控组件，props 包含 value 属性 和 onChange 方法。通过 props.onChange 方法为控件更新值。可以参考受控组件的实现方式。

解决案例：（在线demo）

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);
    // eslint-disable-next-line
  }, []);

  return (
    <Popover
      content={
        <ChromePicker color={color} onChangeComplete={onChangeComplete} />
      }
    >
      <Input
        {...props}
        readOnly
        style={{  125 }}
        addonAfter={
          <div style={{  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;