如何通过单击标题复选框来切换所有复选框反应js

Question

有没有人可以帮助我如何在 toggleCheckboxes() 中实现功能以选中所有复选框。在我的代码中有一个 map 方法。它控制复选框输入的数量。在表 Data 中，每个复选框类型的输入都会在从 manageOrder 映射项目后显示。我尝试使用 useState、setAttribute 但无法解决此问题。

import React, { useEffect, useState, useRef } from 'react';
import { Container, Spinner } from 'react-bootstrap';
import './ManageAllOrder.css';

const ManageAllOrder = () => {
    const [manageOrder, setManageOrder] = useState([]);
    useEffect(() => {
        fetch('https://ghostly-blood-77078.herokuapp.com/orders')
        .then(res => res.json())
        .then(data => setManageOrder(data))
    }, [])
    //change status after click
    const changeStatus= (e) => {
        e.target.innerText = 'active'
    }
    //toggle checkbox
    const rowCheckbox = useRef('')
    const toggleCheckboxes = () => {
        


    }

    return (
        <Container>
            <div>
                <h3 className='my-4' style={{color: '#34495E'}}>Order Management</h3>
                <div>
                {!manageOrder.length ? 
                      <Spinner animation="grow" variant="warning" /> :

                    //table to show data
                    <table className="table">
                        <thead className='table-warning'>
                            <tr>
                                <th><input id='header-checkbox' type='checkbox' onClick={toggleCheckboxes()} /></th>
                                <th>OrderID</th>
                                <th>Date</th>
                                <th>Customer</th>
                                <th>Order</th>
                                <th>Place</th>
                                <th>Price</th>
                                <th>Status</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                    {manageOrder.map(order =>
                            <tr>
                                <td><p><input type='checkbox' ref={rowCheckbox}/></p></td>
                                <td><p>{order._id}</p></td>
                                <td><p>{order.date}</p></td>
                                <td><p>{order.displayName}</p></td>
                                <td><p>{order.name}</p></td>
                                <td><p>{order.place}</p></td>
                                <td><p>{order.amount}</p></td>
                                <td><p onClick={(e) => changeStatus(e)}>pending...</p></td>
                            </tr>
                        )}
                        </tbody>
                    </table>
                }
                </div>
            </div>
        </Container>
    );
};

export default ManageAllOrder;```


[i want to toggle all checkboxes after clicking the checkbox top left corner, i tried a few ways to implement that but i can't because of map method. ][1]
  [1]: https://i.stack.imgur.com/SfbSJ.png

Answer 1

您可以尝试使用 useState 钩子将检查设置为 true/false，然后使用输入道具 checked 并将其设置为如下状态：

import React, { useEffect, useState, useRef } from 'react';
import { Container, Spinner } from 'react-bootstrap';
import './ManageAllOrder.css';

const ManageAllOrder = () => {
    const [manageOrder, setManageOrder] = useState([]);
    const [checked, setChecked] = useState(false)
    useEffect(() => {
        fetch('https://ghostly-blood-77078.herokuapp.com/orders')
        .then(res => res.json())
        .then(data => setManageOrder(data))
    }, [])
    //change status after click
    const changeStatus= (e) => {
        e.target.innerText = 'active'
    }
    //toggle checkbox
    const rowCheckbox = useRef('')
    const toggleCheckboxes = () => {
        setChecked(prevState => !prevState)
    }

    return (
        <Container>
            <div>
                <h3 className='my-4' style={{color: '#34495E'}}>Order Management</h3>
                <div>
                {!manageOrder.length ? 
                      <Spinner animation="grow" variant="warning" /> :

                    //table to show data
                    <table className="table">
                        <thead className='table-warning'>
                            <tr>
                                <th><input id='header-checkbox' type='checkbox' onClick={toggleCheckboxes} /></th>
                                <th>OrderID</th>
                                <th>Date</th>
                                <th>Customer</th>
                                <th>Order</th>
                                <th>Place</th>
                                <th>Price</th>
                                <th>Status</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                    {manageOrder.map(order =>
                            <tr>
                                <td><p><input type='checkbox' ref={rowCheckbox} checked={checked}/></p></td>
                                <td><p>{order._id}</p></td>
                                <td><p>{order.date}</p></td>
                                <td><p>{order.displayName}</p></td>
                                <td><p>{order.name}</p></td>
                                <td><p>{order.place}</p></td>
                                <td><p>{order.amount}</p></td>
                                <td><p onClick={(e) => changeStatus(e)}>pending...</p></td>
                            </tr>
                        )}
                        </tbody>
                    </table>
                }
                </div>
            </div>
        </Container>
    );
};

export default ManageAllOrder;

Answer 2

首先我看不到你在哪里设置复选框的状态值。因此，您可以做的是为提取的数据中的每个条目设置检查柴火，然后相应地更新该字段，一旦您单击选中所有复选框，然后迭代列表，将所有这些复选框标记为 true，您也应该将该值填充回您的复选框（绑定数据）。如果您还有其他问题，请告诉我。