使用擴展React.Component機制

我試圖重現https://github.com/ant-design/ant-design/blob/master/components/form/demo/horizontal-login.md 使用擴展React.Component機制

與更換React.createClass延伸React.Component的antd表例子正確創建antd形式，但我得到一個遺漏的類型錯誤：無法讀取屬性未定義

「getFieldDecorator」用下面的代碼：

import { Form, Icon, Input, Button } from 'antd'; 
const FormItem = Form.Item; 

export default class HorizontalLoginForm extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    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 inline onSubmit={this.handleSubmit}> 
     <FormItem> 
      {getFieldDecorator('userName', { 
      rules: [{ required: true, message: 'Please input your username!' }], 
      })(
      <Input addonBefore={<Icon type="user" />} placeholder="Username" /> 
     )} 
     </FormItem> 
     <FormItem> 
      {getFieldDecorator('password', { 
      rules: [{ required: true, message: 'Please input your Password!' }], 
      })(
      <Input addonBefore={<Icon type="lock" />} type="password" placeholder="Password" /> 
     )} 
     </FormItem> 
     <FormItem> 
      <Button type="primary" htmlType="submit">Log in</Button> 
     </FormItem> 
     </Form> 
     ) 
    } 
}

貌似失蹤Form.create部分導致了問題，但不知道它適合使用的擴展機制。

我該如何正確地做到這一點？

來源

2016-12-16 Marcos Macedo

當你希望包括在父組件表單類，你必須首先創建形式，例如在父組件渲染方法：

... 

    render() { 
     ... 

     const myHorizontalLoginForm = Form.create()(HorizontalLoginForm); 
     ... 
      return (
      ... 
      <myHorizontalLoginForm /> 
     ) 
    }

一定要導入的父類的HorizontalLoginForm類。

來源

2016-12-16 14:14:25 vladimirp

不要在render方法中使用HOC。在渲染中調用HOC會導致組件在每個渲染上重新裝入。 [記錄在這裏]（https://github.com/facebook/react/blob/044015760883d03f060301a15beef17909abbf71/docs/docs/higher-order-components.md#dont-use-hocs-inside-the-render-method）以及[ （https://stackoverflow.com/q/39120494/2479481）。 –

你可以學習官方例子：https://ant.design/components/form/#components-form-demo-advanced-search

@vladimirp這是不好的調用在渲染Form.create。

來源

2016-12-27 01:56:39 benjycui

儘管這個鏈接可能回答這個問題，但最好在這裏包含答案的重要部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 - [來自評論]（/ review/low-quality-posts/18749435） –

@vladimirimp是在正確的軌道上，但有2個問題與選擇的答案。

高級組件（如Form.create()）不應在render方法中調用。
JSX要求用戶定義的組件名稱（如myHorizontalLoginForm）以大寫字母開頭。

爲了解決這個問題，我們只需要改變我們的默認的HorizontalLoginForm出口：

class HorizontalLoginForm extends React.Component { /* ... */ } 

export default Form.create()(HorizontalLoginForm);

然後我們就可以直接使用HorizontalLoginForm，而不需要將其設置爲一個新的變量。（但是如果你確實將它設置爲一個新的變量，你會想要命名變量MyHorizontalLoginForm或其他任何以大寫字母開頭的變量）。

來源

2018-01-30 20:34:38

使用擴展React.Component機制

回答

相關問題