Как я могу использовать HTML <form>с использованием избыточного?

Question

Я не использую html в форме, потому что когда я использую и нажимаю на <button type = "button" className = "button button2" onClick = {() => this.login ()}> logar </ button>, появляется страница обновления и сообщение об ошибке.Но когда я им не пользуюсь, в консоли появляется следующее сообщение: [DOM] Поле пароля не содержится в форме: (Дополнительная информация: https: // goo.gl/9p2vKq)

import React, {Component, Fragment} from 'react'
import  {Redirect} from 'react-router-dom'
import { connect } from 'react-redux'
import ActionCreator from '../redux/actionCreators'

import styled from 'styled-components'

import Button from './elements/Button'

const BodyLogin = styled.div`
#formulario{
    max-width: 850px
}`



import  {Redirect} from 'react-router-dom'



class ScreensLogin extends Component {
  constructor(props){
      super(props)
      this.state = {
          form: {
              email: '',
              passwd: '',
          }        
      }
  }
  componentDidMount(){
      if (this.props.auth.error){
          this.props.reset()
      }      
  }
  handleChange = field => event => {
      const form = {
          ...this.state.form
      }
      form[field] = event.target.value
      this.setState({form})
  }
  login = () => {   
      const {email, passwd} = this.state.form
      this.props.login(email, passwd)
  }

  render(){
      return (
          <Fragment>  
              <BodyLogin> 
                <form>   //this is my problem       
                  <div className='form-group mx-auto' id="formulario">
                      <div className="input-group">
                          <div className="input-group-prepend">
                              <span className="input-group-text" id="">Email</span>
                          </div>
                          <input className="form-control" autoComplete='on' value={this.state.form.email} type="text" onChange={this.handleChange('email')} ></input>
                      </div>
                      <div className="input-group  mt-5 mb-5">
                          <div className="input-group-prepend">
                              <span className="input-group-text" id="">Senha</span>
                          </div>
                          <input className="form-control" autoComplete='on' value={this.state.form.passwd} type="password" onChange={this.handleChange('passwd')} ></input>
                      </div>       
                      <Button>
                          {<button type="button" className="button button2 " onClick={() => this.login()}>logar</button>}
                      </Button><br/><br/>
                      {this.props.auth.isAuth && <Redirect to={'/'}/>}

                      {
                          this.props.auth.error && <p className="text-danger">{this.props.auth.errorMessage}</p>            
                      }
                      {   
                          this.props.auth.isSigningin && <p className="text-info">Carregando...</p>
                      }  
                  </div>  
              </form>
              </BodyLogin>       
          </Fragment>
      )
  }
}

const mapStateToProps = state => {
  return {
      auth: state.auth
  }
}
const mapDispatchToProps = dispatch => {
  return {
      login: (email, passwd) => dispatch(ActionCreator.signinRequest(email,passwd)),
      reset: () => dispatch(ActionCreator.resetError())
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(ScreensLogin)

Возникли проблемы с использованием тега?

Answer 1

Вы используете управляемый компонент.

уберите клик с кнопки

<button type="button" className="button button2 " onClick={() => this.login()}>logar</button>

до

<button type="button" className="button button2">logar</button>

и в вашей форме

<form onSubmit={this.login}>

таким образом, вы фактически отправляете форму,

на другой стороне вы можете передать событие кнопке, подобной этой

<button type="button" className="button button2 " onClick={(e) => this.login(e)}>logar</button>

и функции входа в систему

login = (e) => {
     e.preventDefault();
      const {email, passwd} = this.state.form
      this.props.login(email, passwd)
  }

Таким образом, вы можете указать форме, что я обработал отправку формы, вам не нужно ничего делать.