Ant 设计类型脚本输入字段验证不起作用

Question

我尝试为 Ant design input field validation 做 React 打字稿，它不起作用我得到了这个错误

Property 'name' is missing in type '{}' but required in type 'Readonly'

这是我的代码

import * as React from "react";
import {Button, Card, Col,  Form, Icon, Input, Row,} from "antd";
import moment from 'moment';
import "./style.css";



const {TextArea} = Input;
const {Option} = Select;

const InputGroup = Input.Group;





export namespace Bookform {
    export interface Props {
       name:string;

    }
}

export class Bookform extends React.Component<Bookform.Props, any,any> {



    formRef: any = React.createRef();

    componentDidMount() {
        this.formRef.current.setFieldsValue({
            username: 'Bamboo',
        });
    }
    render() {

        return (

            <div className="my-book">
                <Form onSubmit={this.onSaveBook} name="base"  ref={this.formRef}>

                    <Row gutter={[8, 8]}>
                        <Card size="small" >
                            <Col span={12}>

                                <Form.Item 
                                    name="username" rules={[{ required: true }]}>
                                  <Input placeholder="My book"/>

                            </Form.Item>
                            </Col>

                        </Card>
                    </Row>
         <div>
                        <Button type="primary" htmlType="submit" block><Icon type="save"/>Add book</Button>


                    </div>

                </Form>
            </div>


        );
    }
}

Answer 1

问题出在道具定义上。确保 name 道具总是有价值的，或者像下面那样将其设为可选。

export interface Props {
    name?: string;
}

Ant 设计类型脚本输入字段验证不起作用

Ant design type script Input field validation not working

typescript

reactjs

antd

react-typescript