解決自定義 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={{ 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;