Javascript 选择或取消选择复选框-ReactJS

我已成功创建了选择单个或多个框的函数。在单个框上，我没有任何问题，我的意思是当你点击一个框时，它被选中或取消选中

但“全选”的情况不同。你知道我该怎么解决吗？（我正在使用

材质ui

库作为我的方框，但基本上它们都是简单的

HTML

输入）

选择所有组件和功能：

<Checkbox
    name="checkboxes"
    checked={this.state.allCheckboxes}
    onChange={this.handleAllCheckboxes}
    indeterminate
    />Select All

<Checkbox
      name='DocCheckbox'
      type='checkbox'
      color='default'
      value={JSON.stringify({ documentId: rowData.documentId, documentNumber: rowData.documentNumber })}
      onClick={this.handleCheckboxClick}/>

handleCheckboxClick = (e, id) => {

    if (id) {


    } else {
        let parsedVal = JSON.parse(e.target.value);
        // console.log(e.target.value)
        let newDocList = { ...this.state.docList };
        if (e.target.checked) {
            this.setState({
                singleCheckbox:true
            })
            newDocList[parsedVal.documentId] = parsedVal.documentNumber;
        } else {
            delete newDocList[parsedVal.documentId];
            this.setState({
                singleCheckbox:false
            })
        }
        let toSee = Object.keys(newDocList).length > 0 ? true : false;
        this.setState(
            {
                docList: newDocList,
                visible: toSee
            },
            () => {
                console.log(this.state.docList);
            }
        );

    }
};

选择单个组件和功能：

<Checkbox
    name="checkboxes"
    checked={this.state.allCheckboxes}
    onChange={this.handleAllCheckboxes}
    indeterminate
    />Select All

<Checkbox
      name='DocCheckbox'
      type='checkbox'
      color='default'
      value={JSON.stringify({ documentId: rowData.documentId, documentNumber: rowData.documentNumber })}
      onClick={this.handleCheckboxClick}/>

handleCheckboxClick = (e, id) => {

    if (id) {


    } else {
        let parsedVal = JSON.parse(e.target.value);
        // console.log(e.target.value)
        let newDocList = { ...this.state.docList };
        if (e.target.checked) {
            this.setState({
                singleCheckbox:true
            })
            newDocList[parsedVal.documentId] = parsedVal.documentNumber;
        } else {
            delete newDocList[parsedVal.documentId];
            this.setState({
                singleCheckbox:false
            })
        }
        let toSee = Object.keys(newDocList).length > 0 ? true : false;
        this.setState(
            {
                docList: newDocList,
                visible: toSee
            },
            () => {
                console.log(this.state.docList);
            }
        );

    }
};

更新 根据@norbitrial （答案基于我的财产、电话和数据，因此请随意修改以供您使用）

步骤1-创建一个构造函数来维护数据和全局选中状态

步骤2-创建函数以处理单个和多个复选框

处理单个复选框

处理所有复选框

步骤3-将复选框的状态插入到对象中。并循环它们（同样，这是来自我后端的响应，因此对于每个人来说，这一步都是不同的）

步骤4-呈现复选框（这些复选框基于

材质ui

库，但也可以用于简单的输入）

this.handleCheckboxClick（rowData）}/>
全选

我想稍微改变一下您在应用程序中处理这些事情的方式

从技术上讲，您是直接操纵DOM，而不是让它对其状态做出反应。在这种情况下，有一种更好的方法来处理UI中的复选框状态

解决方案：

<Checkbox
    name="checkboxes"
    checked={this.state.allCheckboxes}
    onChange={this.handleAllCheckboxes}
    indeterminate
    />Select All

<Checkbox
      name='DocCheckbox'
      type='checkbox'
      color='default'
      value={JSON.stringify({ documentId: rowData.documentId, documentNumber: rowData.documentNumber })}
      onClick={this.handleCheckboxClick}/>

handleCheckboxClick = (e, id) => {

    if (id) {


    } else {
        let parsedVal = JSON.parse(e.target.value);
        // console.log(e.target.value)
        let newDocList = { ...this.state.docList };
        if (e.target.checked) {
            this.setState({
                singleCheckbox:true
            })
            newDocList[parsedVal.documentId] = parsedVal.documentNumber;
        } else {
            delete newDocList[parsedVal.documentId];
            this.setState({
                singleCheckbox:false
            })
        }
        let toSee = Object.keys(newDocList).length > 0 ? true : false;
        this.setState(
            {
                docList: newDocList,
                visible: toSee
            },
            () => {
                console.log(this.state.docList);
            }
        );

    }
};

1。更改的默认状态：

<Checkbox
    name="checkboxes"
    checked={this.state.allCheckboxes}
    onChange={this.handleAllCheckboxes}
    indeterminate
    />Select All

<Checkbox
      name='DocCheckbox'
      type='checkbox'
      color='default'
      value={JSON.stringify({ documentId: rowData.documentId, documentNumber: rowData.documentNumber })}
      onClick={this.handleCheckboxClick}/>

handleCheckboxClick = (e, id) => {

    if (id) {


    } else {
        let parsedVal = JSON.parse(e.target.value);
        // console.log(e.target.value)
        let newDocList = { ...this.state.docList };
        if (e.target.checked) {
            this.setState({
                singleCheckbox:true
            })
            newDocList[parsedVal.documentId] = parsedVal.documentNumber;
        } else {
            delete newDocList[parsedVal.documentId];
            this.setState({
                singleCheckbox:false
            })
        }
        let toSee = Object.keys(newDocList).length > 0 ? true : false;
        this.setState(
            {
                docList: newDocList,
                visible: toSee
            },
            () => {
                console.log(this.state.docList);
            }
        );

    }
};

让我声明，我没有您所拥有的真实数据结构，因此我在构造函数中有以下内容，仅用于表示：

constructor(props:any) {
    super(props);
    this.state = {
        items: [
            { documentId: 1, documentNumber: 1234, checked: false },
            { documentId: 2, documentNumber: 1235, checked: false },
            { documentId: 3, documentNumber: 1236, checked: false },
        ],
        hasToCheckAll: false,
    }
}

如您所见，项目已选中

属性，以便在状态中处理它们

2。以不同方式呈现复选框

在渲染函数中，我改变了两件事：

render() {
    return (
        <div>
            <Checkbox
                name="checkboxes"
                checked={this.state.hasToCheckAll}
                onChange={() => this.handleAllCheckboxes()}
                indeterminate
                />Select All

            {this.state.items.map((item:any) => {
                return <div key={item.documentNumber}>
                    <Checkbox
                        name="DocCheckbox"
                        color="default"
                        checked={item.checked}
                        value={JSON.stringify({ ...item.documentId, ...item.documentNumber })}
                        onChange={() => this.handleCheckboxClick(item)}/> {item.documentNumber}
                </div>
            })}
    </div>
    )
}

结果：

<Checkbox
    name="checkboxes"
    checked={this.state.allCheckboxes}
    onChange={this.handleAllCheckboxes}
    indeterminate
    />Select All

<Checkbox
      name='DocCheckbox'
      type='checkbox'
      color='default'
      value={JSON.stringify({ documentId: rowData.documentId, documentNumber: rowData.documentNumber })}
      onClick={this.handleCheckboxClick}/>

handleCheckboxClick = (e, id) => {

    if (id) {


    } else {
        let parsedVal = JSON.parse(e.target.value);
        // console.log(e.target.value)
        let newDocList = { ...this.state.docList };
        if (e.target.checked) {
            this.setState({
                singleCheckbox:true
            })
            newDocList[parsedVal.documentId] = parsedVal.documentNumber;
        } else {
            delete newDocList[parsedVal.documentId];
            this.setState({
                singleCheckbox:false
            })
        }
        let toSee = Object.keys(newDocList).length > 0 ? true : false;
        this.setState(
            {
                docList: newDocList,
                visible: toSee
            },
            () => {
                console.log(this.state.docList);
            }
        );

    }
};


当然，如果有进一步的需要，您可以通过数据操作扩展这个示例。这个解决方案是用
TypeScript
构建的-我用它打开了一个项目-但是你可以在添加类型的地方删除它

上面的例子很有魅力，我希望这有帮助
 是否有理由将此方法用于
docList
？您同意使用不同方法的解决方案吗？通过
docList
我正在用复选框的值填充我的对象。。。一个或多个。后来，
docList
作为一个对象发送给BE，他将文档返回给我。是这样的示例，但不幸的是，我无法用属性
chekced:false
填写我的对象
项
（由我
docList
），因为它被发送到BE并返回一个错误。它在哪里给你错误，那是什么？你说的“它被送去了”是什么意思？你能帮我理解吗？别担心，伙计。你的例子实际上帮助了我很多。根据你的回答，我修改了我的代码，现在它开始工作了。谢谢！！！很好，很乐意帮忙！我已经根据您的回答更新了我的问题。我真的很高兴这是一个迷人的工作！