Блог

Я следую этому сообщению, чтобы изучить формы react и typescript. Существует многоразовая форма с React Bootstrap, о которой я хотел бы рассказать, которую я хотел бы реализовать. Я попытался сделать это, написав пользовательскую форму, как показано ниже. Но я получаю

TS7031: элемент привязки ‘cancel’ неявно имеет тип ‘any’

и я не знаю, как ее использовать, как только я решу эту ошибку. Если я хочу, например, реализовать форму входа в систему и форму входа в систему, как мне обратиться к пользовательской форме ниже

 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;
  

Во-первых, предполагая, что вы используете проект typescript, как вы сказали (расширение файла.tsx), вам нужно ввести параметры для UserForm:

 // This is just an example, not necessary needs to be this exactly types for the parameters
interface UserFormProps {
  cancel(): void; // cancel is a function that returns nothing
  submit(): void;
  errors: string[]; // errors its an array of strings
  passwordErrors: boolean;
  submitButtonText: string;
  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 = ({
  cancel,
  submit,
  elements,
  errors,
  submitButtonText,
  passwordErrors,
}: UserFormProps) => { .....
  

и для функции отображения ошибок:

 interface ErrorsProps {
  errors: string[];
  passwordErrors: boolean;
}

function ErrorsDisplay({ errors, passwordErrors }: ErrorsProps) {...
  

Для ваших функций обработки вам необходимо указать тип события:

 // You are saying the handleSubmit function receives an FormEvent from a HTML Form Element
function handleSubmit(event: React.FormEvent<HTMLFormElement>) { ....

// You are saying the handleCancel function receives an MouseEvent from a HTML Button Element
function 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 project
import UserForm from "./UserForms";

const SignIn = () => {
  return (
    <UserForm
      // I'm setting the values ​​hardcoded just as example
      cancel={() => {console.log('cancel')}}
      submit={() => {console.log('submit')}}
      errors={[]}
      passwordErrors={false}
      submitButtonText="test"
      elements={() => (
        <>
          <Form.Group controlId="ControlId">
            <Form.Control
              type="email"
              name="email"
              value={"email@c.com.br"}
              placeholder={"email"}
            ></Form.Control>
            <Form.Control
              type="password"
              name="password"
              value={"password"}
              placeholder={"password"}
            ></Form.Control>
          </Form.Group>
        </>
      )}
    ></UserForm>
  );
};

export default SignIn;