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

Question

我的react组件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;

Answer 1

您需要将cursor:'pointer'添加到按钮的CSS规则中。这使得移动设备能够识别按下的按钮并触发点击事件。

你可以在这里找到这个GitHub问题的更多信息。

希望这个答案能有所帮助！