reactjs - 如何对数字进行表单验证

Question

我需要对以下组件进行表单验证。如果用户选择 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;