带有 React Bootstrap 的 TypeScript 可重用表单

Question

我正在关注这篇文章以学习反应和打字稿形式。有一个可重用的表单，其中解释了 React Bootstrap，我喜欢实现它。我试图通过编写如下的用户表单来做到这一点。但是我明白了

TS7031：绑定元素“取消”隐式具有“任意”类型

一旦我解决了这个错误，我就不知道如何使用它了。例如，如果我想实现一个登录表单和一个登录表单，我该如何参考下面的用户表单

import React from 'react';

import Form from 'react-bootstrap/Form';

import Button from 'react-bootstrap/Button';

import styled from 'styled-components';

const UserForm =

    ({

        cancel,

        errors,

        submit,

        submitButtonText,

        elements,

        passwordErrors

    }) => {

    function handleSubmit(event) {

        event.preventDefault();

        submit();

    }

    function handleCancel(event) {

        event.preventDefault();

        cancel();

    }

    return (

        <React.Fragment>

            <ErrorsDisplay errors={errors} passwordErrors={passwordErrors} />

            <Form onSubmit={handleSubmit}>

                {elements()}

                <Button className="mr-1" variant="primary" type="submit">{submitButtonText}</Button>

                <Button className="mr-1" variant="secondary" onClick={handleCancel}>Cancel</Button>

            </Form>

        </React.Fragment>

    );

 };

function ErrorsDisplay({ errors, passwordErrors}) {

    let errorDisplay = null;

    if (errors.length) {

        errorDisplay = (

            <React.Fragment>

                <ValidiationLabel>Errors:</ValidiationLabel>

                <ValidiationUl>

                    {errors.map((error, i) => (

                        <li key={i}>{error}</li>

                    ))}

                </ValidiationUl>

            </React.Fragment>

        );

    } else if (!passwordErrors) {

        errorDisplay = (

            <React.Fragment>

                <ValidiationLabel>Errors:</ValidiationLabel>

                <ValidiationUl>{<li>Passwords must match</li>}</ValidiationUl>

            </React.Fragment>

        );

    }

    return errorDisplay;

}

Answer 1

首先，假设您正在使用您所说的 typescript 项目（.tsx 文件扩展名），您需要为 UserForm 输入参数：// This is just an example, not necessary needs to be this exactly types for the parametersinterface UserFormProps {&nbsp; cancel(): void; // cancel is a function that returns nothing&nbsp; submit(): void;&nbsp; errors: string[]; // errors its an array of strings&nbsp; passwordErrors: boolean;&nbsp; submitButtonText: string;&nbsp; elements(): ReactNode; // elements its a funtion that returns react nodes}// Here you are destructuring the object parameter of UserForm function.// You telling it that its an UserFormProps Type Object on ": UserFormProps"const UserForm = ({&nbsp; cancel,&nbsp; submit,&nbsp; elements,&nbsp; errors,&nbsp; submitButtonText,&nbsp; passwordErrors,}: UserFormProps) => { .....对于 ErrorsDisplay 函数：interface ErrorsProps {&nbsp; errors: string[];&nbsp; passwordErrors: boolean;}function ErrorsDisplay({ errors, passwordErrors }: ErrorsProps) {...对于句柄函数，您需要指定事件类型：// You are saying the handleSubmit function receives an FormEvent from a HTML Form Elementfunction handleSubmit(event: React.FormEvent<HTMLFormElement>) { ....// You are saying the handleCancel function receives an MouseEvent from a HTML Button Elementfunction handleCancel(event: React.MouseEvent<HTMLButtonElement>) { ....完成此操作后，您可以在任何地方使用您的用户窗体，例如您的登录页面/登录页面。你只需要导入它：import React from "react";import Form from "react-bootstrap/Form";// here you need to inform the path according to your projectimport UserForm from "./UserForms";const SignIn = () => {&nbsp; return (&nbsp; &nbsp; <UserForm&nbsp; &nbsp; &nbsp; // I'm setting the values hardcoded just as example&nbsp; &nbsp; &nbsp; cancel={() => {console.log('cancel')}}&nbsp; &nbsp; &nbsp; submit={() => {console.log('submit')}}&nbsp; &nbsp; &nbsp; errors={[]}&nbsp; &nbsp; &nbsp; passwordErrors={false}&nbsp; &nbsp; &nbsp; submitButtonText="test"&nbsp; &nbsp; &nbsp; elements={() => (&nbsp; &nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Form.Group controlId="ControlId">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Form.Control&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="email"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="email"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={"[e-mail]"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder={"email"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ></Form.Control>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Form.Control&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={"password"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder={"password"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ></Form.Control>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Form.Group>&nbsp; &nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; ></UserForm>&nbsp; );};export default SignIn;