reactjs 如何向React表IndeterminateCheckbox方法添加类型

r1zk6ea1 于 2023-01-02 发布在 React

关注(0)|答案(2)|浏览(115)

我真的是一个初学者在 typescript 的世界，我目前正在使用的React表库，没有默认类型的文档。
因此，我想请您帮助将类型添加到IndeterminateCheckbox方法。

const IndeterminateCheckbox = React.forwardRef(
  ({ indeterminate, ...rest }, ref) => {
    const defaultRef = React.useRef()
    const resolvedRef = ref || defaultRef

    React.useEffect(() => {
      resolvedRef.current.indeterminate = indeterminate
    }, [resolvedRef, indeterminate])

    return (
      <>
        <input type="checkbox" ref={resolvedRef} {...rest} />
      </>
    )
  }
)

以下是React Table文档中的沙箱链接：https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection-and-pagination?from-embed=&file=/src/App.js:613-1010
我的第二个问题是：* * 我可以在哪里找到类型并自行添加？**

reactjs

来源：https://stackoverflow.com/questions/65844373/how-to-add-types-to-react-table-indeterminatecheckbox-method

2条答案

按热度按时间

jaql4c8m1#

1.创建@类型/React.d.ts

/* eslint-disable */

declare namespace React {
  export default interface RefObject<T> {
    current: T | null;
  }
}

2.输入部分

/* eslint-disable no-param-reassign */

import React, { forwardRef, useEffect, useRef } from 'react';

interface IIndeterminateInputProps {
  indeterminate?: boolean;
  name: string;
}

const useCombinedRefs = (
  ...refs: Array<React.Ref<HTMLInputElement> | React.MutableRefObject<null>>
): React.MutableRefObject<HTMLInputElement | null> => {
  const targetRef = useRef(null);

  useEffect(() => {
    refs.forEach(
      (ref: React.Ref<HTMLInputElement> | React.MutableRefObject<null>) => {
        if (!ref) return;

        if (typeof ref === 'function') {
          ref(targetRef.current);
        } else {
          ref.current = targetRef.current;
        }
      },
    );
  }, [refs]);

  return targetRef;
};

const IndeterminateCheckbox = forwardRef<
  HTMLInputElement,
  IIndeterminateInputProps
>(({ indeterminate, ...rest }, ref: React.Ref<HTMLInputElement>) => {
  const defaultRef = useRef(null);
  const combinedRef = useCombinedRefs(ref, defaultRef);

  useEffect(() => {
    if (combinedRef?.current) {
      combinedRef.current.indeterminate = indeterminate ?? false;
    }
  }, [combinedRef, indeterminate]);

  return (
    <>
      <input type="checkbox" ref={combinedRef} {...rest} />
    </>
  );
});

export default IndeterminateCheckbox;

赞(0）回复(0）举报 2023-01-02

jmo0nnb32#

我只是想把代码在这里，所以它是可见的每个人都有问题。解决方案是从线程从Megha的评论：

import React from "react";

type Props = {
    indeterminate?: boolean;
};

const TableCheckBox: React.ForwardRefRenderFunction<HTMLInputElement, Props> = ({ indeterminate = false, ...rest }, ref) => {
    const defaultRef = React.useRef<HTMLInputElement>();
    const resolvedRef = (ref || defaultRef) as React.MutableRefObject<HTMLInputElement>;

    React.useEffect(() => {
        resolvedRef.current.indeterminate = indeterminate;
    }, [resolvedRef, indeterminate]);

    return (
        <>
            <input type="checkbox" ref={resolvedRef} {...rest} />
        </>
    );
};

export default React.forwardRef(TableCheckBox);

Link: https://github.com/TanStack/table/discussions/1989#discussioncomment-4388612

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs 如何向React表IndeterminateCheckbox方法添加类型

2条答案

相关问题

热门标签

最新问答