带React Bootstrap的TypeScript可重用表单

问题描述

我正在追踪this post，以学习反应和打字稿形式。 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;
}

const ValidiationUl = styled.div`
    color: red;
    padding: 15px 0 40px 10px;
  `;
const ValidiationLabel = styled.h2`
    color: #0069c0;
    font-size: 28px;
  `;
export default UserForm;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）