输入验证无法在react onSubmit中工作？

Question

我有印度和外国人国籍的复选框，

submit(){
  if(this.state.citizenship == ""){
        alert("Please Select Citizenship");
        }
  else if(this.state.citizenship == "Indian" ? this.state.ic_no == "" : null){
            alert("Enter Adhar Number");
        }

        else if(this.state.citizenship == "Foreigner" ? this.state.passport_no == "" : null){
            alert("Enter Passport Number");
        }
  else {
    let data ={
             ic_no: this.state.ic_no,
             passport_no: this.state.passport_no,
             citizenship: this.state.citizenship,

            }

  }
}



 this.state = {
    ic_no: '',
    passport_no: '',
    citizenship: '',
 }




 <div className="form-group row p-l-5">
   <div className="col-md-4">
        <div>
            <input type="radio" name="Citizenship" value="Indian" onChange={this.CitizenshipChange.bind(this)} /> &nbsp;
             <label>Indian</label>
        </div>
    </div>
    <div className="col-md-8">
        <div>
            <input type="radio" name="Citizenship" value="Foreigner" onChange={this.CitizenshipChange.bind(this)} /> &nbsp;
                <label>Foreigner</label>
        </div>
    </div>

</div>
{
    this.state.citizenship == "Foreigner" ?  <div className="form-group">
    <label className="col-md-12">Passport No 
     </label>
    <div className="col-md-12">
        <input className="form-control"  type="text" onChange={this.passport_noChange.bind(this)} value={this.state.passport_no}/>
    </div>
</div> : null

}


{
    this.state.citizenship == "Indian" ? <div className="form-group">
    <label className="col-md-12">IC No 
    </label>
    <div className="col-md-12">
        <input className="form-control"  type="text" onChange={this.ic_noChange.bind(this)} value={this.state.ic_no}/>
    </div>
</div> : null

}

在没有输入身份证明号码或护照号码的情况下对公民身份进行检查后未显示警告

我可以知道我在做什么错。

这不是正确的方法吗

我已经用html和onchange事件更新了报价

Answer 1

我认为条件有问题。 试图简化代码（无法测试）。 我认为它将起作用。

submit(){

    if(this.state.citizenship == ""){
        alert("Please Select Citizenship");
        return;
    }
    else {
      if(this.state.citizenship == "Indian" ){
            if(this.state.ic_no == ""){
                alert("Enter Adhar Number");
                return;
            }
       }
       else if(this.state.citizenship == "Foreigner") {
            if (this.state.passport_no == "" ){
                alert("Enter Passport Number");
                return;
            }
       }
    }

    //Now all checks are done use the data 
    let data ={
         ic_no: this.state.ic_no,
         passport_no: this.state.passport_no,
         citizenship: this.state.citizenship
    }

  }

Answer 2

组件的组成可以做很多改进。

1. 如果要使用定义方式定义state在constructor定义state ，否则不使用this定义。
2. if条件评估正确，但似乎您尚未阻止表单onSubmit事件的默认行为。 因此，请使用e.preventDefault()并return以停止进一步执行。

让我尝试使用上述给定的代码片段重新创建更具可读性和简洁性的组件版本。

// <-- YourComponent.js -->
// Assumption: No redux used to maintain the component states

import React, { Component } from 'react';

export default class YourComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            citizenship: '',
            passport_no: '',
            ic_no: ''
        };
    }

    handleOnChange = e => {
        const { name, value } = e.currentTarget;
        this.setState({
            [name]: value
        });
    };

    handleOnSubmit = e => {
        e.preventDefault();
        const { citizenship, passport_no, ic_no } = this.state;
        // field level validation STARTS
        if(!citizenship){
            alert("Please select Citizenship");
            return;
        } else {
            if (!ic_no && !passport_no) {
                alert("Please enter Aadhaar and Passport Number");
                return;
            } else if(!ic_no) {
                alert("Please enter Aadhaar Number");
                return;
            } else if(!passport_no) {
                alert("Please enter Passport Number");
                return;
            }
        }
        // field level validation ENDS

        // Safe to submit the data to server here
        const data = { citizenship, passport_no, ic_no };
    };

    render() {
        const { citizenship, passport_no, ic_no } = this.state;

        return (
            <form
                action="javascript:void(0);"
                onSubmit={this.handleOnSubmit}
            >
                <div className="form-group row p-l-5">
                    <div className="col-md-4">
                        <div>
                            <input
                                type="radio"
                                name="citizenship"
                                value="Indian"
                                checked={citizenship && citizenship === 'Indian'}
                                onChange={this.handleOnChange}
                            /> &nbsp;
                            <label>Indian</label>
                        </div>
                    </div>
                    <div className="col-md-8">
                        <div>
                            <input
                                type="radio"
                                name="citizenship"
                                value="Foreigner"
                                checked={citizenship && citizenship === 'Foreigner'}
                                onChange={this.handleOnChange}
                            /> &nbsp;
                            <label>Foreigner</label>
                        </div>
                    </div>
                </div>
                {(citizenship && citizenship === 'Foreigner') && (
                    <div className="form-group">
                        <label className="col-md-12">Passport No</label>
                        <div className="col-md-12">
                            <input
                                className="form-control"
                                type="text"
                                name="passport_no"
                                value={passport_no}
                                onChange={this.handleOnChange}
                            />
                        </div>
                    </div>
                )}
                {(citizenship && citizenship === 'Indian') && (
                    <div className="form-group">
                        <label className="col-md-12">IC No</label>
                        <div className="col-md-12">
                            <input
                                className="form-control"
                                type="text"
                                name="ic_no"
                                value={ic_no}
                                onChange={this.handleOnChange}
                            />
                        </div>
                    </div>
                )}
                <button
                    className="btn btn-primary"
                    type="submit"
                >
                    Submit
                </button>
            </form>
        );
    }
}