React，Material UI：提交按钮在手机上不起作用答案

【问题标题】：React, Material UI: Submit button not working on mobilesReact，Material UI：提交按钮在手机上不起作用
【发布时间】：2021-01-28 07:57:39
【问题描述】：

我的反应组件Login 控制用户登录功能。我有一个发布用户凭据的材料 UI 提交按钮。它工作正常，除了在手机上 - 当用户在他们的手机上时，提交按钮不起作用并且不会触发 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;

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您需要在按钮的 CSS 规则中添加 cursor:'pointer'。这允许移动设备识别按钮按下并触发点击事件。

您可以在this GitHub issue here 中找到更多信息。

希望这个答案有帮助！

【讨论】：