活字エラー3.0形式

Question

https://ant.design/components/form/

これからForm.createを試したときに、私はtypescriptですエラーを取得していますがエラーです形式：

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

私はここにtypescriptですエラーが発生します。 Form.create()(NormalLoginForm)

Answer 1

あなたはあなたが持っている問題について詳しく説明できますか？

Answer 2

Form.createはFormComponentPropsにごNormalLoginFormコンポーネント小道具をキャストしようと静的関数です。したがって、あなたの小道具のインターフェイスNormalLoginPropsを作成し、 'antd/lib/form/Form'からFormComponentPropsを直接インポートすることができます。

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