Как получить доступ к общедоступному методу из упакованного компонента, используя TypeScript? - PullRequest
Новая
       2

Как получить доступ к общедоступному методу из упакованного компонента, используя TypeScript?

2 голосов
/ 09 мая 2019

Я работаю над проектом React, используя TypeScript. Они обернули компонент act-select в другой компонент. Завернутый компонент имеет следующий вид: 

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;

Я хотел бы получить доступ к методу blur из реагирующего выбора:

React-select предоставляет два открытых метода:
...
blur () - размытие элемента управления программно

Но я не знаю, как выставить это в моем Компоненте, поэтому я мог вызвать его. Есть идеи?

Ответы [ 3 ]

1 голос
/ 09 мая 2019

Вы можете использовать свойство ref в компоненте Select, чтобы получить ссылку на экземпляр этого компонента.

Затем вы можете вызвать метод blur этого экземпляра. 

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;

Если вам нужен доступ к методу blur вне компонента SelectField, вы можете использовать forwardRef для ссылки на Select вместо 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);

Затем вы можете вызвать метод blur со ссылкой на компонент SelectField: 

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

ref.blur();
1 голос
/ 09 мая 2019

Если я правильно понимаю, вы хотите вызвать Выбрать blur () внутри SelectField .

Существует множество способов, например, привязка родительских и дочерних элементов к нему.с помощью реквизита.Вот обсуждение этого:

Вызовите дочерний метод от родителя

0 голосов
/ 09 мая 2019

Если вы хотите получить к нему доступ из-за пределов компонента SelectField, я бы порекомендовал использовать React.forwardRef для пересылки ref реквизита вашему компоненту SelectField, чтобы вы могли назначить его самостоятельно: 

/* ... */

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

type SelectFieldWithRef<TValue> = React.StatelessComponent<
  SelectFieldProps<TValue>,
  React.Ref<*>
>;

const RefSelectField: SelectFieldWithRef<SelectValue> = (props, ref: any) => {

    /* ... */

    return (<Select ref={ref} {...} />);
};

const SelectField: GenericSelectField<SelectValue> = React.forwardRef(RefSelectField);

export default SelectField;

В компоненте, который вы хотите вызвать blur, вы должны сделать следующее: 

class ParentComponent extends Component {
    constructor(props) {
        super(props);

        this.selectRef = React.createRef();
    }

    somehowTriggerBlur = () => this.selectRef.current.blur();

    render() {
        return (<SelectField ref={ref} {...} />);
    }
}
...