輸入驗證無法在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>
        );
    }
}