当我提交联系表单时，它会显示错误，例如错误发送消息。请帮助我，我的代码有任何错误。我是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();
}
};
这是我使用的代码。请帮助我，这是否有任何逻辑或语法错误。
根据您的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} />
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句