如何在React js中执行多重检查选项？

  • Z时代
  • 2024-01-10
  • 分类：问答

基本上我有两种数组。一个用于所有复选框值，另一个用于自定义值。所以，我的要求是我想获取自定义数组值的默认值复选框选项。如何实施reactjs？如何在React js中执行多重检查选项？

这是我的示例代码，

var optionArray = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7'], selectedValue = ['item1', 'item5']; 
var Items = optionArray.map(function(el, i){ 
var isChecked = el == selectedValue; 
       return <div key={i} className="radio-tick-row"> 
        <input type="checkbox" className="radio-tick-input" id={"option"+i} value={el} name="selectOrganisationType" onChange={self.onChange.bind(self)} checked={isChecked} /> 
        <label className="checkbox-tick-label term" htmlFor={"option"+i}><span>{el}</span></label> 
       </div>; 
     });

回答：

尝试，如果在排列情况：

var optionArray = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7'], selectedValue = ['item1', 'item5']; 
var Items = optionArray.map(function(el, i){ 
var isChecked = false; 
       if(selectedValue.indexOf(el)) { 
        isChecked = true; 
       } 
       return <div key={i} className="radio-tick-row"> 
        <input type="checkbox" className="radio-tick-input" id={"option"+i} value={el} name="selectOrganisationType" onChange={self.onChange.bind(self)} defaultChecked={isChecked} /> 
        <label className="checkbox-tick-label term" htmlFor={"option"+i}><span>{el}</span></label> 
       </div>; 
     });

回答：

为了更好的视野以及ES 20的

const Items = optionArray.map((el, i) => { 
    const isChecked = selectedValue.indexOf(el) > -1; 
    return (
    <div key={i} className="radio-tick-row"> 
     <input type="checkbox" className="radio-tick-input" id={"option"+i} 
     value={el} name="selectOrganisationType" 
     onChange={self.onChange.bind(self)} checked={isChecked} /> 
     <label className="checkbox-tick-label term" htmlFor={"option"+i}> 
     <span>{el}</span> 
     </label> 
    </div> 
); 
}

回答：

您可以使用Set ：

var optionArray = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7'], selectedValue = ['item1', 'item5']; 
var selectedValueSet = new Set(selectedValue); 
var Items = optionArray.map(function(el, i){ 
    var isChecked = selectedValueSet.has(el); 
    return (
     <div key={i} className="radio-tick-row"> 
      <input type="checkbox" className="radio-tick-input" id={"option"+i} value={el} name="selectOrganisationType" onChange={self.onChange.bind(self)} checked={isChecked} /> 
      <label className="checkbox-tick-label term" htmlFor={"option"+i}><span>{el}</span></label> 
     </div> 
    ); 
});

以上是 如何在React js中执行多重检查选项？ 的全部内容， 来源链接： utcz.com/qa/263868.html

回到顶部