Reactjsの動的チェックボックスを制御するには？

Question

私の配列からレンダリングされた動的チェックボックスを制御しようとしました。私の問題は、私は複数のチェックボックスを持っていますが、私は1つだけの状態を私のコンストラクタに持っています。以下は

せずに、動的フィールド/項目を制御する方法上の任意の他の方法はあります私のコードです：

onAddingItem = (item) =>{ 
 
    var self = this; 
 
    const value = item.target.type === 'checkbox' ? item.target.checked : item.target.value; 
 
    var newArray = self.state.product.slice(); 
 
    if(item.target.checked){ 
 
     newArray.push(item.target.value); 
 
     self.setState({addProducts:value, product:newArray}) 
 
    } else { 
 
     newArray.splice(item.target.value, 1); //remove element 
 
     self.setState({addProducts:value, product:newArray}); //update state 
 
    } 
 
    } 
 

 
    render(){ 
 
    var self = this; 
 
    const {title, photo, photoHeight, photoWidth, showPhoto, editorState, description, editorData, productsList} = this.state; 
 
    const product_list = productsList.map((index, i) => 
 
     <tr key={i+1}> 
 
     <td>{i+1}</td> 
 
     <td>{index.name}</td> 
 
     <td> 
 
      <div class="checkbox checkbox-circle checkbox-color-scheme"> 
 
       <label class="checkbox-checked"> 
 
        <input type="checkbox" value={index.name} checked={self.state.addProducts} onChange={this.onAddingItem}/> <span class="label-text">Add ?</span> 
 
       </label> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    );

私は、チェックボックスのいずれかを確認するたびに。他のすべてのチェックボックスもチェックされます。あなたが見るように、チェックボックスの値を配列に追加してチェックし、配列から既存の値を削除する場合は、チェックボックスをオフにします。

Answer 1

各チェックボックスにchecked〜self.state.addProductsと設定しています。このプロパティーはブール値を予期していますので、真偽値はすべてのボックスをチェックします。

checkedは、その値がself.state.productである場合にのみ真となります。

編集：多分このようなもの？ checked={self.state.product.includes(item.value)}

Answer 2

製品アレイにisCheckedプロパティを設定した方が良いでしょう。

ここでは、次のとおりです。

class App extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
    this.state = { 
 
     productsList :[ 
 
     {name: 'USS Seawolf class', isChecked: false}, 
 
     {name: 'USS Skipjack', isChecked: false}, 
 
     {name: 'USS Lafayette', isChecked: false}, 
 
     {name: 'USS Ohio class', isChecked: false}, 
 
     ] 
 
    } 
 
    } 
 
    
 
    onAddingItem = (i) => (event) => { 
 
    this.setState((state, props) => { 
 
     state.productsList[i].isChecked = !state.productsList[i].isChecked; 
 
     return { 
 
     productsList: state.productsList 
 
     } 
 
    }) 
 
    } 
 

 
    render() { 
 
    let {productsList} = this.state; 
 
    return (
 
     <table> 
 
     <tbody> 
 
      { productsList.map((product, i) =>{ 
 
      return(
 
       <tr key={i+1}> 
 
       <td>{i+1}</td> 
 
       <td>{product.name}</td> 
 
       <td> 
 
        <div class="checkbox checkbox-circle checkbox-color-scheme"> 
 
         <label class="checkbox-checked"> 
 
          <input type="checkbox" value={product.name} checked={product.isChecked} onChange={this.onAddingItem(i)}/> <span class="label-text">Add ?</span> 
 
         </label> 
 
        </div> 
 
       </td> 
 
      </tr> 
 
      ) 
 
      })} 
 
      
 
     </tbody> 
 
     </table> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(< 
 
    App/> , 
 
    document.getElementById('app') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

そして、あなたはfilter()でisChecked要素を取得することができます：

let selectedProductsArray = this.state.productsList.filter((product, i)=>{ 
    return product.isChecked 
}); 

Answer 3

私がコントロールに各オブジェクトの内部プロパティを追加するにエマドに同意しますただし、各チェックボックスは、これらの値を更新するときに状態を変更しないようにしてください。

class App extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
    this.state = { 
 
     productsList: [{ name: "Product A", isAdded: false }, { name: "Product B", isAdded: false }, { name: "Product C", isAdded: false }], 
 
     addedProducts: [] 
 
    } 
 
    } 
 

 
    onAddingItem = (item) => { 
 
    const isChecked = item.target.checked; 
 
    const value = item.target.value; 
 

 
    this.setState(prevState => ({ productsList: prevState.productsList.map(product => product.name === value ? { ...product, isAdded: isChecked } : product) })); 
 

 
    if (isChecked) 
 
     this.setState(prevState => ({addedProducts: [...prevState.addedProducts, value] })); 
 
    else { 
 
     const newAddedProducts = this.state.addedProducts.filter(product => product !== value) 
 
     this.setState({ addedProducts: newAddedProducts }); 
 
    } 
 
    } 
 
    
 
    render() { 
 
    const { productsList } = this.state; 
 
    const product_list = productsList.map((index, i) => 
 
     <tr key={i + 1}> 
 
     <td>{i + 1} - </td> 
 
     <td>{index.name}</td> 
 
     <td> 
 
      <div class="checkbox checkbox-circle checkbox-color-scheme"> 
 
      <label class="checkbox-checked"> 
 
       <input type="checkbox" value={index.name} checked={this.state.productsList[i].isAdded} onChange={this.onAddingItem} /> <span class="label-text">Add ?</span> 
 
      </label> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    ); 
 

 
    return (
 
     <div> 
 
     <table> 
 
      <tbody> 
 
      {product_list} 
 
      </tbody> 
 
     </table> 
 
     <div style={{ marginTop: "20px" }}>Added Products: {this.state.addedProducts.join(', ')}</div> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(< 
 
    App/> , 
 
    document.getElementById('app') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>