【发布时间】：2020-09-23 21:36:17
【问题描述】：
我创建了一个Contact Us 表单，提交按钮被禁用。仅当所有字段均已填写且条目有效时，才会启用提交按钮。
目前，我的问题是在我输入了所有有效条目的字段后，该按钮仍未显示。但是，在输入有效输入的所有字段后，我单击name 或email 输入框并在末尾键入一个字符，然后submit 按钮变为活动状态。我认为我的 checkValidation 函数存在一些异步问题，我不确定如何解决。
import React, { Component } from 'react'
import axios from 'axios'
import '../css/ContactUs.css';
class ContactUs extends Component {
constructor(props) {
super(props)
this.state = {
name: '',
email: '',
birthDate: '',
emailConsent: false,
disableSubmitButton: true
}
}
changeHandler = e => {
const nameSelect = e.target.name
const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
this.setState({
[nameSelect]: value
})
this.checkValidation()
}
checkValidation = e => {
const { name, email, birthDate, emailConsent, disableSubmitButton } = this.state
const validCharacters = /^[a-zA-Z ]+$/
const validEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const today = new Date();
const birthdate = new Date(birthDate);
if (
!(name.length === 0) &&
name.match(validCharacters) &&
!(email.length === 0) &&
validEmail.test(email) &&
emailConsent === true &&
birthdate < today
) {
this.setState({
disableSubmitButton: false
}, () => console.log('passed'))}
}
clearHandler = e => {
this.setState({
name: '',
email: '',
birthDate: '',
emailConsent: false
})
console.log('clicked clear')
}
handleSubmit = e => {
const { name, email, birthDate, emailConsent } = this.state
e.preventDefault()
console.log(this.state);
axios.post('https://my-json-server.typicode.com/xxxxx/users', {name : name, email: email, birthDate: birthDate, emailConsent: emailConsent })
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
}
render() {
const { name, email, birthDate, emailConsent, disableSubmitButton } = this.state
return (
<div className="container">
<h1>Contact Us</h1>
<form onSubmit={this.handleSubmit}>
<label>
Name
<input
className="text"
name="name"
type="text"
value={name}
onChange={this.changeHandler}
/>
</label>
<label>
Email
<input
className="text"
name="email"
type="email"
value={email}
onChange={this.changeHandler}
/>
</label>
<label>
Birth Date
<input
className="text"
name="birthDate"
type="date"
value={birthDate}
onChange={this.changeHandler}
/>
</label>
<label className="checkbox">
<input
name="emailConsent"
type="checkbox"
checked={emailConsent}
onChange={this.changeHandler}
/>
I agree to be contact via email.
</label>
<div className="float-right">
<button className="clear" type="button" onClick={this.clearHandler}>Clear</button>
<input disabled={disableSubmitButton} className={disableSubmitButton ? 'submit-inactive' : 'submit'} type="submit" value="Submit"></input>
</div>
</form>
</div>
)
}
}
export default ContactUs
【问题讨论】：
-
这不是你的错误，但我注意到你的
checkValidation函数的定义类似于checkValidation = e => {…}，采用e参数。这个e参数永远不会传递给它或使用，所以你应该写checkValidation = () => {…}或checkValidation() {…}。
标签： javascript reactjs