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

您正在使用controlled组件。

从按钮上删除onclick

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

通过这种方式，您可以告诉表单我已经处理了表单的提交，您无需执行任何操作。

我如何使用Redux使用HTML <form>？

1 个答案: