Question

我试图在reactJs中实现选择/取消选择所有功能，但无法实现。

我已经启用了选择/取消选择所有主标题复选框的功能，并且也可以选择或取消选择单个元素。

我的工作链接：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Box extends Component{
    constructor(props){
        super(props);
        this.state = {
            allChecked: false,
            list: [
                {id:1, name: "item1", isChecked: false},
                {id:2, name: "item2", isChecked: false},
                {id:3, name: "item3", isChecked: false},
            ],
        };
    }

handleChange = (e) => {
    let list =  this.state.list;
    let allChecked = this.state.allChecked;
    if(e.target.value === "checkAll"){
        list.forEach(item => {
            item.isChecked = e.target.checked;
            allChecked = e.target.checked;
        });
    }
    else{
        list.find( item => item.name === e.target.name).isChecked = e.target.checked;
    }
    this.setState({list:list, allChecked: allChecked});
}

renderList = () => {
    return this.state.list.map(item =>
        <div>
            <input key={item.id} type="checkbox" name={item.name} value={item.name} checked={item.isChecked} onChange={this.handleChange} />
            <label>{item.name}</label>
        </div>
    )
}
render(){
    return(
        <div>
            <input type="checkbox" 
            value="checkAll" 
            checked={this.state.allChecked} 
            onChange={this.handleChange} />Check all
            <br/>
            {this.renderList()}
        </div>
    );
  }
}

ReactDOM.render(<Box/>, document.getElementById('root'));

为简单起见，出于某些原因，我希望使用纯Javascript而不是jquery来使用这种（https://jsfiddle.net/52uny55w/）功能。

Answer 1

我已经解决了https://codesandbox.io/s/vvxpny4xq3上的问题

  handleChange = e => {
    let itemName = e.target.name;
    let checked = e.target.checked;
    this.setState(prevState => {
      let { list, allChecked } = prevState;
      if (itemName === "checkAll") {
        allChecked = checked;
        list = list.map(item => ({ ...item, isChecked: checked }));
      } else {
        list = list.map(item =>
          item.name === itemName ? { ...item, isChecked: checked } : item
        );
        allChecked = list.every(item => item.isChecked);
      }
      return { list, allChecked };
    });
  };

一些注意事项。

1）我更新了checkAll按钮，使其具有name属性以确保一致性

2）如果要修改现有状态，请使用新的功能语法

3）分解对象，并在可能的情况下不要对其进行突变。您可以使用map代替forEach并使用传播运算符来修改对象而无需进行更改。

在reactJs中选择/取消选择所有复选框

1 个答案: