使用使用类型记录的react复选框功能

Question

如何使复选框使如果标题复选框被选中，那么所有其他复选框将被选中，如果所有其他复选框将被取消选中？另外，如果选择了其他复选框，那么报头复选框应该是不确定的，使用？

我在App.tsx中有以下代码

import React, {useState} from "react";
import { useQuery } from "react-query";
import { GraphQLClient, gql } from "graphql-request";
import "./index.css";
import Button from "./Components/Button";


const API_URL = `https://graphqlzero.almansi.me/api`;

const graphQLClient = new GraphQLClient(API_URL, {
  headers: {
    Authorization: `Bearer ${process.env.API_KEY}`,
  },
});


export function useGetPosts() {
  return useQuery("get-posts", async () => {
    const {
      users: { data },
    } = await graphQLClient.request(gql`
      {
        users {
          data {
            id
            name
            username
            email
            address {
              street
            }
            phone
            website
          }
        }
      }
    `);
    return data;
  });
}
const App = () => {
  const [checked, setChecked] = useState(false)
  const handleClick = () => setChecked(!checked)
  const response = useGetPosts();
  const { data } = response;
  console.log({ response });

  //   address: {street: 'Kulas Light'}
  // email: "Sincere@april.biz"
  // id: "1"
  // name: "Leanne Graham"
  // phone: "1-770-736-8031 x56442"
  // username: "Bret"
  // website: "hildegard.org"
  return (
    <div>
     
      <section>
        <div className="header">Users
        <form>
          <input
            type="text"
              placeholder="Search Here" />
            
           
            
          </form>
          <Button name = "New User" />
           
          </div>
        <header>
         
          <div className="col" >
            <input
              onClick={handleClick} checked={checked}
              type="checkbox"
              className = "column"
            />
          </div>
          <div className="col">Name</div>
          <div className="col">Username</div>
          <div className="col">Email</div>
          <div className="col">Phone</div>
          <div className="col">Website</div>
          <div className="col">Address</div>
        </header>
        {data?.map((item: any) => (
          <>
            
            <div className="row">
              <div className="col">
                <input
                  onClick={handleClick} checked={checked}
                  type="checkbox" />
              </div>
              <div className="col">{item?.name}</div>
              <div className="col">{item?.username}</div>
              <div className="col">{item?.email}</div>
              <div className="col">{item?.phone}</div>
              <div className="col">{item?.website}</div>
              <div className="col">{item?.address?.street}</div>
            </div>
          </>
        ))}
      </section>
    </div>
  );
};

export default App;

Answer 1

我注意到，对于头输入和子输入，您都有相同的onClick函数。为了实现这个功能，我们需要为子输入创建另一个handleClick函数。

1. 创建布尔值数组

const isCheckedData =data.map((项)=>{返回false；});

1. 添加另一个包含此数组的状态

const isCheckedArray，setIsCheckedArray =setIsCheckedArray

1. 将数组的值分发到

下面的映射数据

{data？.map(项目:任何，索引) => ( <> )

        <div className="row">
          <div className="col">
            <input
              onClick={() => handleClickChildren(index)} checked={isCheckedArray[index]}
              type="checkbox" />
          </div>
          <div className="col">{item?.name}</div>
          <div className="col">{item?.username}</div>
          <div className="col">{item?.email}</div>
          <div className="col">{item?.phone}</div>
          <div className="col">{item?.website}</div>
          <div className="col">{item?.address?.street}</div>
        </div>
      </>
    ))}

1. 创建一个函数，该函数将索引作为参数，以便我们可以在状态下更改特定复选框的值。

​

const handleClickChildren = (index) => {
const findCheckBox = isCheckedArray.find(data=>isCheckedArray. indexOf(data)===index);
const newCheckedArray = isCheckedArray.splice(isCheckedArray.indexOf(findCheckBox), 1, !findCheckBox);
setIsCheckedArray(newCheckedArray);

​

检查文档以获得更多信息，但基本上它只是将前面的值替换为true或false。https://www.w3schools.com/jsref/jsref_splice.asp

5.)最后，重构您的第一个handleOnClick函数，以根据标头复选框设置为true或false来更改isCheckedArray的状态。

Answer 2

本例可能对您有所帮助：https://chakra-ui.com/docs/components/form/checkbox#indeterminate

基本上，只有两条规则像你列出的那样：

• 报头复选框只有在选中所有其他复选框时才会选中(我们使用.every()
• 测试此复选框，只有在只选中一些复选框时，报头复选框才是不确定的(我们使用.some()

进行测试)。

Answer 3

在javascript中的示例，在有所需功能的地方使用react。

import React, { useEffect, useState } from 'react';

const CHECKBOX_VALUES = [false, false];

function Question16() {
  const [checkboxValues, setCheckboxValues] = useState(CHECKBOX_VALUES);
  const checkboxRef = React.useRef(null);

  const onCheck = (pos, value) => {
    const nextCheckboxValues = [ ...checkboxValues ];
    nextCheckboxValues[pos] = value;
    setCheckboxValues(nextCheckboxValues);
  }

  useEffect(() => {
    const isIndeterminate = checkboxRef.current.indeterminate;
    const someCheckboxChecked = checkboxValues.some((checkValue) => checkValue);
    const someCheckboxUnchecked = checkboxValues.some((checkValue) => !checkValue);
    const nextIndeterminate = someCheckboxChecked && someCheckboxUnchecked;
    if (isIndeterminate !== nextIndeterminate) {
      checkboxRef.current.indeterminate = nextIndeterminate;
    }
    if (!nextIndeterminate) {
      checkboxRef.current.checked = someCheckboxChecked;
    }
  }, [checkboxValues]);
  
  return (
    <>
      <div>
        <span>Parent checkbox</span>
        <input type="checkbox" ref={checkboxRef} />
      </div>
      <div>
        <span>Checkbox 1</span>
        <input
          checked={checkboxValues[0]}
          onChange={(elem) => {
              const value = elem.target.checked;
              onCheck(0, value);
          }}
          type="checkbox"
        />
      </div>
      <div>
        <span>Checkbox 2</span>
        <input
          checked={checkboxValues[1]}
          onChange={(elem) => {
            const value = elem.target.checked;
            onCheck(1, value);
          }}
          type="checkbox"
        />
      </div>
    </>
  );
}

export default Question16;