2017-04-07 5 views
1

저는 앤트 디자인 폼 구성 요소를 래핑하는 방법을 알아 내려고 노력했습니다. 몇 가지 Select에 동일한 옵션이 있으므로 SelectWrapper (아래의 스 니펫 참조)을 만들고 싶습니다. 불행하게도, antd의 모양이 맘에하지 않는 것 그리고 나를 Select에 양식 소품을 통과에도 불구하고앤트 디자인 폼 구성 요소 래핑

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

에 오류가 있습니다.

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

전체 예제는이 솔루션을 사용하는 것이 었습니다

답변

0

https://github.com/ant-design/ant-design/issues/5700

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

에 해결 문제를보고

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); 

복제 https://github.com/megawac/antd-form-issuenpm start (확산에 대한 바벨 필요) 클래스 기반 래퍼 컴포넌트 기능 기반의