Блог

Мой компонент react Login контролирует функциональность входа пользователя. У меня есть кнопка отправки пользовательского интерфейса material, которая отправляет учетные данные пользователей. Это работает нормально, за исключением мобильных телефонов — когда пользователи находятся на своих телефонах, кнопка отправки не работает, и событие onClick не запускается. Любые предложения о том, как заставить это работать?

Вот компонент входа в систему:

 import React from 'react'
import Header from './Header'
import TextField from "@material-ui/core/TextField";
import Button from '@material-ui/core/Button'
import {Link} from 'react-router-dom'
import firebase from 'firebase'
import {auth} from 'firebase/app'


class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      email: "",
      password: "",
      errors:[]
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }



  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }

  handleSubmit(e) {
    e.preventDefault()
    const { email, password } = this.state
    const { history } = this.props
    const errorLog = []
  
    auth().signInWithEmailAndPassword(email, password)
      .then((res) => {
        history.push('/gigregister')
        console.log(`token: ${res.data.user.getIdToken()}`)
      })
      .catch((err) => {
        if(err.code === 'auth/wrong-password'){
         errorLog.push('Wrong credentials, please try again')
         this.setState({
          errors: errorLog
        })
        }
      })
    
  }

  render() {
  
    return (
      <>
        <div>
          <Header />
        </div>
        <div className = 'login-container'>
        <div className ='gig-button'>
        <Link to="/Homepage" style={{ textDecoration: "none" }}>
         <button className = 'gig-button-button'>Gigs this week</button>
        </Link>
        </div>
        <div className="login-main">
          <div className="login">
            <h4>Venue login</h4>
            <h5>Not registered? Sign up <Link to="/venueregister" style={{ textDecoration: "none" }}>here</Link></h5>
            <form onSubmit={this.handleSubmit}>
            <TextField
                placeholder="Enter email"
                id="email"
                name="email"
                onChange={this.handleChange}
              />
              <TextField
                placeholder="Enter password"
                id="password"
                name="password"
                error ={this.state.errors ? true : false}
                errorText = {this.state.errors}
                helperText = {this.state.errors}
                onChange={this.handleChange}
                type ='password'
              />
              <div className="button">
                <Button type="submit">Submit</Button>
              </div>
            </form>
          </div>
        </div>
        </div>
      </>
    );
  }
}

export default Login;
  

Вам нужно добавить cursor:'pointer' правила CSS для вашей кнопки. Это позволяет мобильным устройствам распознавать нажатие кнопки и запускать событие щелчка вместо этого.

Вы найдете более подробную информацию в этом выпуске GitHub здесь .

Надеюсь, этот ответ поможет!