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

Question

当我提交联系表格时，它显示错误，如错误发送消息.请帮助我，是否有任何错误在我的代码。这是我用过的代码，请帮助我，我的代码是否有任何逻辑或语法错误。

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

基于你的 Props 接口，我想你是在传递一个 onSubmit 回调作为一个道具。

如果是这样的话，你需要提取出 onSubmit 从 this.props，所以下面不会失败。

<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} />

Answer 2

你的代码有几个问题

首先，你没有调用 onSubmit 所以当你提交表格时，它会出错，因为它不知道这个函数。<form className='form' onSubmit={this.onSubmit}>

你需要创建一个这样的函数。

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

也没有函数被调用。handleInputChange 所以你也需要创建这样的函数，像这样。

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