当我提交联系表单时，它在 react js 中显示错误

Question

当我提交联系表单时，它显示错误消息，例如错误发送消息。如果我的代码有任何错误，请帮助我。我是 React js 的新手。这是我用过的代码。请帮助我这是否有任何逻辑或语法错误。

import React, { FormEvent, ReactElement } from 'react';
import { noop } from 'rxjs';
import { EmailData } from '../../../models/i-email-data';
import { EmailInput, MessageInput, NameInput, SubjectInput } from './';



  interface Props {
        onSubmit: (data: EmailData) => Promise<any>;
    }

    *type* State = EmailData;

    export class ContactForm extends React.Component<Props, State> {
        public state: State = {
            name: '',
            email: '',
            subject: '',
            message: '',
        };

        public render(): ReactElement {
            const { name, email, subject, message } = this.state;
            return (
                <>
                    <h3 className='contact-form__title'>Send a Message</h3>
                    <form className='form' onSubmit={this.onSubmit}>
                        <NameInput onChange={this.handleInputChange} value={name} />
                        <EmailInput onChange={this.handleInputChange} value={email} />
                        <SubjectInput onChange={this.handleInputChange} value={subject} />
                        <MessageInput onChange={this.handleInputChange} value={message} />
                        <div className='contact-form__btn-wrapper'>
                            <button className='contact-form__submit'> Submit</button>
                        </div>
                    </form>
                </>
            );

import React, { FormEvent, ReactElement } from 'react';
import { noop } from 'rxjs';
import { EmailData } from '../../../models/i-email-data';
import { EmailInput, MessageInput, NameInput, SubjectInput } from './';

interface Props {
    onSubmit: (data: EmailData) => Promise<any>;
}

type State = EmailData;

export class ContactForm extends React.Component<Props, State> {
    public state: State = {
        name: '',
        email: '',
        subject: '',
        message: '',
    };

    public render(): ReactElement {
        const { name, email, subject, message } = this.state;
        return (
            <>
                <h3 className='contact-form__title'>Send a Message</h3>
                <form className='form' onSubmit={this.props.onSubmit}>
                    <NameInput onChange={this.handleInputChange} value={name} />
                    <EmailInput onChange={this.handleInputChange} value={email} />
                    <SubjectInput onChange={this.handleInputChange} value={subject} />
                    <MessageInput onChange={this.handleInputChange} value={message} />
                    <div className='contact-form__btn-wrapper'>
                        <button className='contact-form__submit'> Submit</button>
                    </div>
                </form>
            </>
        );
    }

    private handleInputChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
        const { value, name } = event.target;
        this.setState({ [name]: value } as any);
    };

    private onSubmit = async (e: FormEvent): Promise<void> => {
        try {
            e.preventDefault();
            await this.props.onSubmit(this.state);
            this.setState({ name: '', email: '', subject: '', message: '' });
        } catch (e) {
            noop();
        }
    };

这是我用过的代码。请帮助我这是否有任何逻辑或语法错误。

Answer 1

您的代码存在一些问题。

首先，您没有名为 onSubmit 的函数，因此当您提交表单时，它会出错，因为它不知道该函数。 <form className='form' onSubmit={this.onSubmit}>

你需要像这样创建一个函数：

onSubmit = () => {
// do stuff in here
}

也没有函数调用：handleInputChange 所以您也需要创建它，如下所示：

handleInputChange = () => {
// do stuff in here
}

Answer 2

根据您的 Props 界面，我猜您正在传递 onSubmit 回调作为道具。

如果是这种情况，您需要从 this.props 中提取 onSubmit，因此以下操作不会失败。

<form className='form' onSubmit={this.onSubmit}>

编辑 1：您需要传递状态才能将表单的状态传递给父组件

改为：

<form 
  className='form'
  onSubmit={(event) => {
    event.preventDefault();
    this.props.onSubmit(this.state);
  }}
>

编辑 2：我发现你也不见了 handleInputChange。

handleInputChange 的快速实现如下所示：

handleInputChange = (name) => ({ target }) => {
  this.setState((prevState) => ({
    ...prevState,
    [name]: target.value
  });
}

你可以这样称呼它：

<NameInput onChange={this.handleInputChange('name')} value={name} />
<EmailInput onChange={this.handleInputChange('email')} value={email} />

当我提交联系表单时，它在 react js 中显示错误

When I submit the contact form its shows error in react js

form-submit

reactjs