ReactJs/Semantic UI 选中循环中的复选框

Question

我使用 map:

通过 json 数据渲染一些 checkbox

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

它工作正常，您可以 select 任何 chekcbox 并将其作为控制台日志中的数组获取（我以某种方式处理并将其保存到数据库），但现在我想获取用户 select编辑之前，从数据库（api），我得到了这个数据（对象）

facilities: "1,3"

这意味着用户 select 复选框 1 和 3，我想选中复选框，我尝试的是使用 defaultChecked 属性，但是select所有checkbox不只有1,3，有什么解决办法吗？

JSFiddle

Answer 1

像这样更新你的代码或参考 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]
  })
};

ReactJs/Semantic UI 选中循环中的复选框

ReactJs/Semantic UI check checkbox in loop

javascript

reactjs

semantic-ui