时间戳

首页 > 解决方案 > 如何在反应js中获取复选框的值

reactjs - 如何在反应js中获取复选框的值

问题描述

我正在尝试检索我的复选框的检查值，但我得到空值这是我的代码

<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="all" id="all" />
  <label className="form-check-label"  name="all" id="all">ALL</label>
</div>
</form>

和我的方法：

constructor(props){
    super(props)
    this.state={
      rfp:"",
      rfx:"",
      rfp_x:"",
      all:"",
    
 
    }
    this.onChange =  this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
   }
  onChange(e){
    this.setState({[e.target.name] : e.target.value});}
  onSubmit(e){
    e.preventDefault();
    const FilterRegion={
  
      rfx:this.state.rfx,
      rfp:this.state.rfp,
      rfp_x:this.state.rfp_x,
      all:this.state.all,
    }
    console.log(FilterRegion)
   }

和我提交表单时的屏幕：

https://gyazo.com/32a24813545ebf7d3a48b72be724a76f

请我尝试解决我的问题并显示我的复选框的值或名称！我需要做什么

标签： reactjsformscheckboxreact-redux

解决方案

使用受控组件时，您不会获得值，您只需将其提供给 HTML：您的 javascript 状态是事实的来源。也就是说，您应该进行以下更改：

对复选框值使用布尔值：

this.state = {
  rfp: false,
  rfx: false,
  rfp_x: false,
  all: false
};

使用event.target.checked而不是event.target.value：

this.setState({ [e.target.name]: e.target.checked });

演示：https ://codesandbox.io/s/poliished-bush-5mf1n?file=/src/App.js

推荐阅读