我需要对以下组件进行表单验证。如果用户选择 Postpaid，planValue 应大于 399，data 应大于 50。如果用户选择 Prepaid，planValue 应大于 200，data 应大于 20，否则应显示相应字段的 planMsg 和 dataMsg。我需要在更改中调用验证函数。当我开始输入 planValue 或数据时，正在显示味精，但在我输入正确的值后，味精并没有消失。是否有适当的方法来验证此表格。
import React from 'react';
import Axios from 'axios';
const url = "http://localhost:4000/planDetails";
class AddPlan extends React.Component {
constructor() {
super();
this.state = {
planData: { planValue: '', data: '', calls: '', addOns: '', planType: '' }, successMessage: '', errorMessage: '',
planMsg: '', minVal: '', maxVal: '', dataMsg: '', minData: '', maxData: '',
};
}
addPlan = (e) => {
const plan = {
planValue: this.state.planData.planValue,
data: this.state.planData.data,
calls: this.state.planData.calls,
addOns: this.state.planData.addOns,
planType: this.state.planData.planType,
}
Axios.post(url, plan)
.then(res => console.log(res))
.catch(error => {
console.log(error);
})
}
change = (event) => {
const value = event.target.value;
const name = event.target.name;
this.setState({
planData: {
[name]: value,
}
})
if (name === 'planType') {
this.setPlanLimit(value);
}
this.validate(name, value);
}
setPlanLimit = (value) => {
if (value === "Postpaid") {
this.setState({
minVal: 399,
minData: 50,
})
}
if (value === "Prepaid") {
this.setState({
minVal: 200,
minData: 20,
})
}
}
validate = (name, value) => {
if (this.state.planData.planType === "Postpaid") {
if (name === 'planValue' && Number(value) < 399) {
this.setState({
planMsg: 'Value cannot be less than 399 for Postpaid'
})
} else if (name === 'planValue' && Number(value) > 399) {
this.setState({
planMsg: ''
})
}
}
if (this.state.planData.planType === "Prepaid") {
if (name === 'planValue' && Number(value) < 200) {
this.setState({
planMsg: 'Value cannot be less than 200 for Prepaid'
})
} else if (name === 'planValue' && Number(value) > 200) {
this.setState({
planMsg: ''
})
}
}
if (this.state.planData.planType === "Postpaid") {
if (name === 'data' && Number(value) < 50) {
this.setState({
dataMsg: 'Data should be 50GB or more for Postpaid'
})
} else if (name === 'data' && Number(value) > 50) {
this.setState({
dataMsg: ''
})
}
}
if (this.state.planData.planType === "Prepaid") {
if (name === 'data' && Number(value) < 20) {
this.setState({
dataMsg: 'Data should be 20GB or more for Prepaid'
})
} else if (name === 'data' && Number(value) > 20) {
this.setState({
dataMsg: ''
})
}
}
}
render() {
return <React.Fragment>
<div>
<div className="row">
<div className="col-md-6 offset-md-3">
<br />
<div className="card">
<div className="card-header" style={{ backgroundColor: 'rgba(0, 33, 651)', color: 'white' }}>
<h6>Create a new plan</h6>
</div>
<div className="card-body">
<form onSubmit={this.addPlan} className="form" >
<div className="form-group">
<label>Type</label> <br />
<div className="form-check form-check-inline">
<input value="Postpaid" onChange={this.change} className="form-check-input" type="radio" name="planType" id="postpaid" required />
<label className="form-check-label" htmlFor="postpaid">Postpaid</label>
</div>
<div className="form-check form-check-inline">
<input value="Prepaid" onChange={this.change} className="form-check-input" type="radio" name="planType" id="prepaid" required />
<label className="form-check-label" htmlFor="postpaid">Prepaid</label>
</div>
</div>
<div className="form-group">
<label>Plan Value</label>
<input onChange={this.change} type="number" name="planValue" className="form-control" required min={this.state.minVal} max={this.state.maxVal} />
</div>
<p id="planMsg" className="text-danger">
{this.state.planMsg}
</p>
<div className="form-group">
<label>GB/Month</label>
<input onChange={this.change} type="number" name="data" className="form-control" required min={this.state.minData} max={this.state.maxData} />
</div>
<p id="dataMsg" className="text-danger">
{this.state.dataMsg}
</p>
<div className="form-group">
<label>Unlimited Calls</label> <br />
<div className="form-check form-check-inline" >
<input onChange={this.change} className="form-check-input" type="radio" name="calls" id="yes" required />
<label className="form-check-label" htmlFor="yes">Yes</label>
</div>
<div className="form-check form-check-inline" >
<input onChange={this.change} className="form-check-input" type="radio" name="calls" id="no" required />
<label className="form-check-label" htmlFor="no">No</label>
</div>
</div>
<div className="form-group">
<label> Add-ons</label>
<textarea onChange={this.change} value={this.state.planData.addOns} name="addOns" cols="83" className="form-control" required ></textarea>
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary"
style={{ backgroundColor: 'rgba(0, 33, 65)', fontSize: '15px' }} >
Add Plan
</button>
</div>
</form>
</div>
{this.state.successMessage ? <p id="successMsg" className="text-success addMsg"> {this.state.successMessage} :</p> :
<p id="errorMessage" className="text-danger message">{this.state.errorMessage}</p>
}
</div>
</div>
</div>
</div>
</React.Fragment>
}
}
export default AddPlan;