引用React Select

Question

当我尝试将React Select引用到变量中时，我得到了StateManager而不是Select，而ctipt类型不知道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 = () => {
  if (!this.selectRef.current) {
    return;
  }
  this.selectRef.current.onMenuOpen();
}

这将起作用。