javascript - 如何在Reactjs中控制动态复选框？

Question

我尝试控制从我的数组呈现的动态复选框。我的问题是我有多个复选框，但我的构造函数中只有一种状态。是否还有其他方法可以控制动态字段/项目而无需

下面是我的代码:

  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

如果您为产品数组设置 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
});