循环中的ReactJs /语义UI复选框

debugcn 发表于 Dev

旅游旅行

我checkbox通过json数据渲染一些map：

Data.FacData.map((v, i) => (
  <div key={i} className="CheckBox">
    <input
      type="checkbox"
      name="Facilities"
      value={v.id}
      onChange={this.getFacilities}
      id={"Facilities-"+v.id}
      />
    <label htmlFor={"Facilities-" + v.id}>{v.name}</label>
  </div>
))

JSFiddle

它工作正常，您可以选择任何chekcbox并将其作为数组添加到控制台日志中（我以某种方式处理并将其保存到数据库中），但是现在我想从数据库（api）获取之前选择的用户，我得到了此数据（目的）

facilities: "1,3"

这意味着用户选择复选框1和3，我想使复选框选中，我想有什么用defaultChecked属性，但它选择所有复选框不仅1,3，任何解决方案？

JSFiddle

阿维纳什

像这样更新代码或参考https://jsfiddle.net/L7y2m8zr/17/，您需要使用split将值字符串转换为数组

componentDidMount() {
  /*get data from api*/
  const data = "1,3"
  const newValues = data.split(",").map(n => parseInt(n))
  this.setState({
    facilitiesValue: newValues
  });
}

您还可以基于数组是否包含给定的id来设置defaultChecked或checked值，而不是仅传递数组或字符串（因为这是代码，而不是魔术:)）

return (
    <div>
    {
        Data.FacData.map((v, i) => (
        <div key={i} className="CheckBox">
             <input
             type="checkbox"
             name="Facilities"
             value={v.id}
             onChange={this.getFacilities}
             id={"Facilities-"+v.id}
             checked = {this.state.facilitiesValue.includes(parseInt(v.id))} 
            />
             <label htmlFor={"Facilities-" + v.id}>{v.name}</label>
        </div>
        ))
     }
    </div>
)

还更新onchange处理程序，以更新状态

getFacilities = (e) => {
  const checked = this.state.facilitiesValue;
  let index;

  if (e.target.checked) {
    checked.push(parseInt(e.target.value))
  } else {
    index = checked.indexOf(parseInt(e.target.value))
    checked.splice(index, 1)
  }
  console.log(checked)
  this.setState({
    facilitiesValue: [...checked]
  })
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。