React jsで複数のチェックオプションを実行するにはどうすればよいですか？

Question

基本的に私は2種類の配列を持っています。 1つはすべてのチェックボックス値用で、もう1つはカスタム値用です。だから、私の要件は、私はチェックボックスのオプションにデフォルトでカスタム配列の値から値を選択して取得したいです。どのようにreactjsを実装するには？

これは、アレイ状態であれば

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>; 
     }); 

Answer 1

のTry A、私のサンプルコードです：

より見やすくするために

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>; 
     }); 

Answer 2

だけでなく、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> 
); 
} 

Answer 3

あなたは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> 
    ); 
});