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

}

在对公民身份进行了检查之后，未输入adhar号码或护照号码未显示警报

我可以知道我在做什么错

这不是正确的方法吗

我已经用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

许多方面都可以在组件的组成方面得到改善。

如果要使用已定义的方式定义char pc1[] = "STRING"; char pc2[] = "ANOTHERSTRING";，请使用state在constructor中定义this。
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>
        );
    }
}

输入验证无法在react onSubmit中起作用吗？

2 个答案: