javascript - Hvordan få tilgang til en offentlig metode fra en innpakket komponent ved bruk av TypeScript?

Jeg jobber med et React-prosjekt som bruker TypeScript. De pakket react-select-komponenten inn i en annen komponent. Den innpakkede komponenten er som følger:

import * as React from "react";
import Select from "react-select";
import { Props as SelectProps } from "react-select/lib/Select";

export interface SelectValue {
  label: string;
  value: string;
}

export interface SelectFieldProps<TValue> extends SelectProps<TValue> {
  label?: string;
}

type GenericSelectField<TValue> = React.StatelessComponent<
  SelectFieldProps<TValue>
>;

const SelectField: GenericSelectField<SelectValue> = ({
  label = "",
  ...rest
}) => (
    <div className="react-select-wrapper">
      {label ? <span className="input__label">{label}</span> : null}
      <Select classNamePrefix="react-select" {...rest} />
    </div>
  );

export default SelectField;

Jeg ønsker å få tilgang til metoden blur fra react-select:

React-select eksponerer to offentlige metoder:
...
blur() - gjør kontrollen uskarp programmatisk

Men jeg vet ikke hvordan jeg skal eksponere det i komponenten min, slik at jeg kan kalle det. Noen ideer?

Svar #1

Du kan bruke ref-egenskapen på Select-komponenten for å få en referanse til forekomsten av denne komponenten.

Da kan du kalle blur-metoden til denne instansen.

const SelectField: GenericSelectField<SelectValue> = ({label = "",...rest}) => {
  const selectEl = React.useRef(null);      

  // this function could be a callback
  function handleBlur() {
    selectEl.current.blur();
  }

  return (
    <div className="react-select-wrapper">
      {label ? <span className="input__label">{label}</span> : null}
      <Select ref={selectEl} classNamePrefix="react-select" {...rest} />
    </div>
  );
}

export default SelectField;

Hvis du trenger å få tilgang til blur-metoden utenfor SelectField-komponenten din, kan du bruke forwardRef for å referere til Select i stedet for SelectField.

const SelectField = (props, ref) => {
  const {label = "",...rest} = props;
  const selectEl = React.useRef(null);      

  return (
    <div className="react-select-wrapper">
      {label ? <span className="input__label">{label}</span> : null}
      <Select ref={ref} classNamePrefix="react-select" {...rest} />
    </div>
  );
}

export default React.forwardRef(SelectField);

Da kan du kalle blur-metoden med referansen til SelectField-komponenten :

const ref = React.createRef();
<SelectField ref={ref} label=""/>;

ref.blur();

Svar #2

Hvis jeg forstår dette riktig, vil du utløse Select's blur() inne i SelectField.

Det finnes mange måter, for eksempel foreldre-barn-binding via props. Her er en diskusjon om dette:

Kall barne-metode fra forelder

Relaterte artikler