Enveloppant un composant de forme de fourmi

Question

J'ai essayé de comprendre comment emballer un composant de forme de fourmi. J'ai plusieurs Select s qui auront les mêmes options, donc je voulais créer un SelectWrapper (voir l'extrait ci-dessous). Malheureusement, la forme de ANTD ne semble pas comme ça et erreur avec

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

malgré moi en passant par la forme des accessoires pour la Select.

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

Exemple complet (nécessite babel pour la diffusion)

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.com/megawac/antd-form-issue et npm start pour voir la question

Answer 1

résolu https://github.com/ant-design/ant-design/issues/5700

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

La solution était d'utiliser un composant wrapper basé sur la classe en place de la base fonctionnelle.