reactjs - 引用 React Select

Question

当我尝试将 React Select 引用到变量中时，我得到 StateManager 而不是 Select 并且 typesctipt 不知道 this.selectRef.current.select 但这个选择是变量。是更好的解决方案，然后将 this.selectRef.current.select 重新键入为 Select？

我想通过单击其他元素来展开选择。

import Select from "react-select";

interface OwnProps<T> {
  alignRight?: boolean;
  components?: ComponentsType<T>;
  defaultValue?: Value<T>;
  disabled?: boolean;
  isSearchable?: boolean;
  onChange?: DropdownChangeHandler<T>;
  onBlur?: React.FocusEventHandler;
  options: T[];
  placeholder?: string;
  value: Value<T>;
  menuPortalTarget?: HTMLElement | null;
  dataTest?: string;
}

export default class Dropdown<T = Option> extends React.PureComponent<OwnProps<T>> {
  static defaultProps = {
    isSearchable: false,
  };

  selectRef: React.RefObject<Select<T>>

  constructor(props: OwnProps<T>){
    super(props);
    this.selectRef = React.createRef();
  }

  expand = () => {
    console.log(this.selectRef)
    // this.selectRef.current.select
  };

  render() {
    const {
      alignRight,
      components,
      menuPortalTarget,
      defaultValue,
      disabled,
      isSearchable,
      onChange,
      options,
      onBlur,
      placeholder,
      value,
      dataTest,
    } = this.props;

    return (
      <div data-test={dataTest}>
        <Select<T>
          components={components}
          defaultValue={defaultValue}
          isDisabled={disabled}
          isSearchable={isSearchable}
          menuPortalTarget={menuPortalTarget}
          onBlur={onBlur}
          onChange={onChange}
          options={options}
          placeholder={placeholder}
          ref={this.selectRef}
          value={value}
        />
      </div>
    );
  }
}

Answer 1

更新您对 expand 函数的定义，如下所示。并在单击其他元素时调用它。

expand = () => {
  if (!this.selectRef.current) {
    return;
  }
  this.selectRef.current.onMenuOpen();
}

这将起作用。