Javascript 如何在react中从多个复选框到数组中获取值？

如何在react js中为数组获取多个复选框值？这是我的API动态目的地。我想用一个数组发布到后端

{
  this.state.destination.length > 0 ? (
    this.state.destination.map((destination, index) => (
      <div className="col-md-3">
        <div class="pretty p-default">
          <input type="checkbox" name="dest" value={index} onClick={event => this.handleDestination(event)} />
          <div class="state p-primary">
            <label>{destination.dest_name}</label>
          </div>
        </div>
      </div>
    ))
  ) : (
    <div>
      <label>
        <b>No results found ! </b>{' '}
      </label>
    </div>
  );
}



handleDestination(event) {

    const options=this.state.options
    let index
    if(event.target.checked){
      options.push(+event.target.value)
    }
    else{
      index=options.indexOf(+event.target.value)
      options.splice(index,1)
    }
    this.setState({ options:options})

}

{
this.state.destination.length是否大于0(
this.state.destination.map（（destination，index）=>(
此.handleDestination（事件）}/>
{destination.dest_name}
))
) : (
未找到任何结果！{'}
);
}
处理目的（事件）{
const options=this.state.options
let索引
if（event.target.checked）{
选项推送（+事件.目标.值）
}
否则{
index=options.indexOf（+event.target.value）
选项.拼接（索引，1）
}
this.setState（{options:options}）
}

您可以将

handleDestination

方法与一个额外的参数绑定-选中元素的索引：

this.handleDestination.bind（this，index）

工作示例：

到

this.handleDestination.bind(this, index)
                   ^^^^^^^^^^^^^^^^^

然后将

handleDestination

方法修改为类似于我上面所做的：

handleDestination(index, event){
  console.log(index) // checked element index
  console.log(this.props.destination[index]) // your checked element
  ...
}

---

希望它能有所帮助

这是我在项目中使用的类似模式。你可以在这里参考

 state = {
    form: {
      companyType: '',
      services: [],
      name: '',
      surname: '',
      email: '',
      concepts: [],
      technologies: [],
    },
  };


public handleChange = (event: any) => {
    const { name } = event.target;
    const checkedArr = [];
    let value;
    if (event.target.type !== 'checkbox') {
      value = event.target.value;
    } else {
      const checkeds = document.getElementsByTagName('input');
      for (let i = 0; i < checkeds.length; i++) {
        if (checkeds[i].checked) {
          checkedArr.push(checkeds[i].value);
        }
      }
      value = checkedArr;
    }

    const { form } = this.state;
    form[name] = value;

    this.setState({ form });
  };

状态={
表格：{
公司类型：“”，
服务：[]，
名称：“”，
姓：''，
电子邮件：“”，
概念：[]，
技术：[]，
},
};
public handleChange=（事件：any）=>{
const{name}=event.target；
常量checkedArr=[]；
让价值；
如果（event.target.type！==“复选框”）{
value=event.target.value；
}否则{
const checkeds=document.getElementsByTagName（'input'）；
for（设i=0；i

---

我正在将复选框值放入数组中

我明白了我的新功能是这样的，它工作得很好。但是值没有出来，数组的索引来了。我如何更改。这是我的新函数。我再次更新了我的问题。让我检查一下我的handleDestination函数。我不想得到数组的索引，我想要值。我该怎么修理that@GuGue你看过我的例子了吗？我更新了我的答案

handleDestination(index, event){
  console.log(index) // checked element index
  console.log(this.props.destination[index]) // your checked element
  ...
}

 state = {
    form: {
      companyType: '',
      services: [],
      name: '',
      surname: '',
      email: '',
      concepts: [],
      technologies: [],
    },
  };


public handleChange = (event: any) => {
    const { name } = event.target;
    const checkedArr = [];
    let value;
    if (event.target.type !== 'checkbox') {
      value = event.target.value;
    } else {
      const checkeds = document.getElementsByTagName('input');
      for (let i = 0; i < checkeds.length; i++) {
        if (checkeds[i].checked) {
          checkedArr.push(checkeds[i].value);
        }
      }
      value = checkedArr;
    }

    const { form } = this.state;
    form[name] = value;

    this.setState({ form });
  };