I am creating a filtering form to filter my data based on the checkboxes which will have a value of true or false but I don't know why I have the value undefined
.
My code:
The Constructor:
constructor(props){
super(props)
this.state={
rfp:false,
rfx:false,
rfp_x:false,
allclassification: false,
}
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onChange
:
onChange(e){
this.setState({ [e.target.name]: e.target.checked });
}
onSubmit
:
onSubmit(e){
e.preventDefault();
const FilterClassification = {
// classification
rfx:this.state.rfx,
rfp:this.state.rfp,
rfp_x:this.state.rfp_x,
allclassification:this.state.allclassification,
}
console.log(FilterClassification)
axios.post("http://localhost:8080/MenuFiltre/filtreregioncloser",FilterClassification )
}
HTML:
<form onSubmit={this.onSubmit}>
<fieldset>
<legend>RFX/RFP:</legend>
<div className="form-check">
<input type="checkbox" className="form-check-input" onChange={this.onChange} value={this.state.rfx} name="rfx" id="rfx" />
<label className="form-check-label" name="rfx">RFX</label>
<input type="checkbox" className="form-check-input" onChange={this.onChange} value={this.state.rfp} name="rfp" id="rfp" />
<label className="form-check-label" >RFP</label>
<input type="checkbox" className="form-check-input" onChange={this.onChange} value={this.state.rfp_x} name="rfp_x" id="rfp_x"/>
<label className="form-check-label" >RFP(X)</label>
<input type="checkbox" className="form-check-input" onChange={this.onChange} name="allclassification" id="allclassification" />
<label className="form-check-label" name="all" id="all">ALL</label>
</div>
</from>
The screen of result in console:
What should I do to change undefined
to false value?
Aucun commentaire:
Enregistrer un commentaire