Typoskript Fehler auf ant Design Version 3.0 Form

Question

Ich bin ein Typoskript Fehler bekommen, wenn die Form.create von https://ant.design/components/form/

Ausprobieren Dies ist der Fehler:

bearbeiten Wenn ich versuche, dies zu nutzen Form:

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

class NormalLoginForm 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} className="login-form"> 
     <FormItem> 
      {getFieldDecorator('userName', { 
      rules: [{ required: true, message: 'Please input your username!' }], 
      })(
      <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" /> 
     )} 
     </FormItem> 
     <FormItem> 
      {getFieldDecorator('password', { 
      rules: [{ required: true, message: 'Please input your Password!' }], 
      })(
      <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" /> 
     )} 
     </FormItem> 
     <FormItem> 
      {getFieldDecorator('remember', { 
      valuePropName: 'checked', 
      initialValue: true, 
      })(
      <Checkbox>Remember me</Checkbox> 
     )} 
      <a className="login-form-forgot" href="">Forgot password</a> 
      <Button type="primary" htmlType="submit" className="login-form-button"> 
      Log in 
      </Button> 
      Or <a href="">register now!</a> 
     </FormItem> 
     </Form> 
    ); 
    } 
} 

const WrappedNormalLoginForm = Form.create()(NormalLoginForm); 

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

ich das Typoskript Fehler hier: Form.create()(NormalLoginForm)

Answer 1

Können Sie mehr über das Problem erfahren, das Sie haben?

Answer 2

Form.create ist eine statische Funktion bereiten NormalLoginForm Komponente Requisiten FormComponentProps zu werfen. Um dies zu erreichen, können Sie Ihre Prop-Schnittstelle NormalLoginProps erstellen und FormComponentProps direkt aus 'antd/lib/form/Form' importieren.

import { Form, Icon, Input, Button, Checkbox } from 'antd'; 
import {FormComponentProps} from 'antd/lib/form/Form'; 
const FormItem = Form.Item; 
interface NormalLoginProps{} 

class NormalLoginForm extends React.Component<NormalLoginProps & FormComponentProps> { 
    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} className="login-form"> 
     <FormItem> 
      {getFieldDecorator('userName', { 
      rules: [{ required: true, message: 'Please input your username!' }], 
      })(
      <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" /> 
     )} 
     </FormItem> 
     <FormItem> 
      {getFieldDecorator('password', { 
      rules: [{ required: true, message: 'Please input your Password!' }], 
      })(
      <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" /> 
     )} 
     </FormItem> 
     <FormItem> 
      {getFieldDecorator('remember', { 
      valuePropName: 'checked', 
      initialValue: true, 
      })(
      <Checkbox>Remember me</Checkbox> 
     )} 
      <a className="login-form-forgot" href="">Forgot password</a> 
      <Button type="primary" htmlType="submit" className="login-form-button"> 
      Log in 
      </Button> 
      Or <a href="">register now!</a> 
     </FormItem> 
     </Form> 
    ); 
    } 
} 

const WrappedNormalLoginForm = Form.create<NormalLoginProps>()(NormalLoginForm); 

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