I've been trying to figure out how to wrap an ant-design form ponent. I have several Selects that will have the same options, so I wanted to create a SelectWrapper (see snippet below). Unfortunately, antd's form doesn't seem to like this and will error with

createBaseForm.js:98 Uncaught TypeError: Cannot read property 'onChange' of undefined

despite me passing through the form props to the Select.

function ReusableCountrySelect({countries, ...props}) {
  return (
    <Select
      {...props}
    >
      {
        countries.map(c => (
          <Select.Option
            value={c.id}
            key={c.id}
          >{c.name}</Select.Option>
        ))
      }
    </Select>
  );
}

Full example (requires babel for the spread)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const mountNode = document.getElementById('root');

import {
  Form, Select, Button
} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

function ReusableCountrySelect({countries, ...props}) {
  return (
    <Select
      {...props}
    >
      {
        countries.map(c => (
          <Select.Option
            value={c.id}
            key={c.id}
          >{c.name}</Select.Option>
        ))
      }
    </Select>
  );
}

class Demo extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }

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

    return (
      <Form onSubmit={this.handleSubmit}>

        <FormItem
          label="Select Country"
          hasFeedback
        >
          {getFieldDecorator('select', {
            rules: [
              { required: true, message: 'Please select your country!' },
            ],
          })(
            <ReusableCountrySelect
              countries={[
                {name: 'china', id: 'china'},
                {name: 'india', id: 'india'},
                {name: 'britain', id: 'britain'}
              ]}
              placeholder="Please select a country"
            />
          )}
        </FormItem>

        <FormItem
          wrapperCol={{ span: 12, offset: 6 }}
        >
          <Button type="primary" htmlType="submit">Submit</Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedDemo = Form.create()(Demo);

ReactDOM.render(<WrappedDemo />, mountNode);

clone and npm start to see the issue

I've been trying to figure out how to wrap an ant-design form ponent. I have several Selects that will have the same options, so I wanted to create a SelectWrapper (see snippet below). Unfortunately, antd's form doesn't seem to like this and will error with

createBaseForm.js:98 Uncaught TypeError: Cannot read property 'onChange' of undefined

despite me passing through the form props to the Select.

function ReusableCountrySelect({countries, ...props}) {
  return (
    <Select
      {...props}
    >
      {
        countries.map(c => (
          <Select.Option
            value={c.id}
            key={c.id}
          >{c.name}</Select.Option>
        ))
      }
    </Select>
  );
}

Full example (requires babel for the spread)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const mountNode = document.getElementById('root');

import {
  Form, Select, Button
} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

function ReusableCountrySelect({countries, ...props}) {
  return (
    <Select
      {...props}
    >
      {
        countries.map(c => (
          <Select.Option
            value={c.id}
            key={c.id}
          >{c.name}</Select.Option>
        ))
      }
    </Select>
  );
}

class Demo extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }

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

    return (
      <Form onSubmit={this.handleSubmit}>

        <FormItem
          label="Select Country"
          hasFeedback
        >
          {getFieldDecorator('select', {
            rules: [
              { required: true, message: 'Please select your country!' },
            ],
          })(
            <ReusableCountrySelect
              countries={[
                {name: 'china', id: 'china'},
                {name: 'india', id: 'india'},
                {name: 'britain', id: 'britain'}
              ]}
              placeholder="Please select a country"
            />
          )}
        </FormItem>

        <FormItem
          wrapperCol={{ span: 12, offset: 6 }}
        >
          <Button type="primary" htmlType="submit">Submit</Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedDemo = Form.create()(Demo);

ReactDOM.render(<WrappedDemo />, mountNode);

clone https://github./megawac/antd-form-issue and npm start to see the issue

• javascript
• antd

2 Answers 2

How to wrap antd ponent? Spread love and props!!!

import { Select as AntSelect} from 'antd'; 

const Select = (props) => {
    return (<AntSelect {...props} >{props.children}</AntSelect>)
}

Solved in https://github./ant-design/ant-design/issues/5700

Form need controls's ref, but a functional ponent don't have ref.

The solution was to use a class based wrapper ponent in place of the functional based one.