本文簡單分析了下 Form 組件的特點，以及定制化輸入組件的封裝技巧，希望對大家有所幫助。

antd Form 示例代碼

import React from 'react'
import { Form, Input } from 'antd'

class FormDemo extends React.Component {
  
  submit = () => {
    const { form } = this.props

    form.validateFields((err, values) => {
      console.log(err, values)
    })
  }

  render() {
    const { form } = this.props

    return (
      <Form onSubmit={this.submit}>
        <Form.Item>
          {form.getFiledDecorator('userName', { initialValue: 'abc' })(
            <Input />
          )}
        </Form.Item>
        <Form.Item>
          <Button type="submit" >submit</Button>
        </Form.Item>
      </Form>
    )    
  }
}

export default Form.create()(FormDemo)

分析

Form.create() 返回一個HOC，將內(nèi)部創(chuàng)建的 form 對象通過 props 傳遞給 FormDemo 組件，form 提供的 getFiledDecorator api從用法上看也是一個HOC，通過該api包裝后的 Input 組件已經(jīng)和 FormDemo 上層的HOC雙向綁定，我們可以通過 form.validateFields 做表單域校驗，獲取表單值等操作。

實際上 form.getFiledDecorator() 返回的HOC給包裹的組件設(shè)置了 value 和 onChange 兩個props，頂層HOC在提供的 onChange 內(nèi)部劫持組件的輸入變化，保存狀態(tài)，同步 value，從而實現(xiàn)雙向綁定。

擴展

經(jīng)過分析，實際上 form.getFiledDecorator 包裹的組件不一定非得是 antd 提供的輸入組件，我們自己也可以封裝針對特定業(yè)務(wù)場景使用的復(fù)雜組件，只要在組件內(nèi)部綁定來自HOC的 value 以及觸發(fā)來自HOC的 onChange 事件，即可實現(xiàn)和 form 的雙向綁定，從而充分利用 Form 組件的特性。