#reactjs
#реагирует на
Вопрос:
Я работал над приложением react, которому нужна система регистрации. Я использовал один и тот же процесс в каждой требуемой функции, и он не работал ни в одной из них. Я хочу отладить это, прежде чем двигаться дальше. Это форма для отправки пароля на электронную почту пользователя, если пользователь забудет свой пароль.
const initialState = { email: '' }; class EmailPassword extends Component { constructor(props) { super(props); this.state = { ...initialState }; this.handleChange = this.handleChange.bind(this); } handleChange(e) { const { name, value } = e.target; this.setState({ [name]: value }) } handleSubmit = async (e) =gt; { e.preventDefault(); } render() { const { email } = this.state; const configAuthWrapper = { headline: 'Email Password' }; return ( lt;AuthWrapper {...configAuthWrapper}gt; lt;div className='formWrap'gt; lt;form onSubmit={this.handleSubmit}gt; lt;FormInput type = "email" name = "email" value = {email} placeholder = 'Email' onChange = {this.handleChange} /gt; lt;/formgt; lt;Button type='submit'gt; Send email lt;/Buttongt; lt;/divgt; lt;/AuthWrappergt; ); } } Вот как выглядит вывод, без явной проверки электронной почты при отправке неправильного электронного письма: 
Что это должно показать: 
Комментарии:
1. Где код для проверки пароля или отображения ошибки в случае сбоя проверки?
2. @KanishkAnand Я верю, что это встроенная вещь? Это проверка электронной почты, а не пароля. Когда вводится неверный пароль, предполагается
type = 'email'его проверить. Я в этом совершенно новичок, так что могу ошибаться.
Ответ №1:
Моя Button не была завернута внутрь form . Решение, которое я использовал:
lt;AuthWrapper {...configAuthWrapper}gt; lt;div className='formWrap'gt; lt;form onSubmit={this.handleSubmit}gt; lt;FormInput type = "email" name = "email" value = {email} placeholder = 'Email' handleChange = {this.handleChange} /gt; lt;Button type="submit"gt; Send email lt;/Buttongt; lt;/formgt; //form must wrap the button lt;/divgt; lt;/AuthWrappergt;