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

Posted 2023-02-23

【中文标题】带有 React js 和状态未定义值的复选框

【英文标题】：checkbox whit React js and state undefined Value

【发布时间】：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

【参考方案1】：

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

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

示例：codesandbox.io example