带有 React js 和状态未定义值的复选框答案

【问题标题】：checkbox whit React js and state undefined Value带有 React js 和状态未定义值的复选框
【发布时间】：2020-11-28 22:24:28
【问题描述】：

我正在创建一个过滤表单来根据复选框过滤我的数据，复选框的值为真或假，但我不知道为什么我的值未定义。

我的代码：构造函数：

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(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>
  &nbsp; &nbsp; &nbsp; &nbsp;

  <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>
  &nbsp; &nbsp; &nbsp; &nbsp;

  <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>
  &nbsp; &nbsp; &nbsp; &nbsp;


  <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>

undefined value False value

【问题讨论】：

标签： reactjs checkbox axios components state

【解决方案1】：

我刚刚检查了您的代码，一切看起来都很正常。

我在 codesandbox.io 上创建了一个示例，并将您的代码粘贴到此处进行仔细检查，一切都如您所愿？

示例：codesandbox.io example

【讨论】：