javascript - react-select DropdownIndicator işleyicisinde menü açık mıysa çıkar

react-select içindeki ok stilini değiştirmem gerekecek. Aşağıdaki kod örneğinde olduğu gibi components özniteliğini kullanarak bunu yapabileceğimi öğrendim.

Ancak, DropdownIndicator'e gelen props, menünün açık olup olmadığı hakkında herhangi bir bilgi sağlamıyor gibi görünüyor. Menü açık mı kapalı mı olduğuna bağlı olarak ok stilini değiştirmek için bu bilgiyi kullanmam gerekecek.

O bilgiyi nasıl alabilirim?

import ReactSelect, { components } from 'react-select';

...

const DropdownIndicator = (props) => {  
  const { isFocused } = props;
  
  // Which prop tells if the menu is open? Certainly isFocused is not the correct one.
  const caretClass = isFocused ? 'caret-up' : 'caret-down';

  return (
    <components.DropdownIndicator {...props}>
      <div className={`${caretClass}`} />
    </components.DropdownIndicator>
  );
};

return (<ReactSelect
 components={{ DropdownIndicator }}
 placeholder={placeholder}
 value={value}
 onBlur={onBlur}
 name={name}
 ...
/>)

Cevap #1

Bence react-select, tüm selectProps değerlerini özel bileşenlere iletiyor. Ve selectProps içinde dropdown'un açık olup olmadığını belirlemek için kullanılan menuIsOpen adlı bir alan var.

Yani menuIsOpen öğesine şu şekilde erişebilirsiniz:-

const DropdownIndicator = (props) => {  
  const { menuIsOpen } = props.selectProps;
  
  // menuIsOpen will tell if dropdown is open or not
  const caretClass = menuIsOpen ? 'caret-up' : 'caret-down';

  return (
    <components.DropdownIndicator {...props}>
      <div className={`${caretClass}`} />
    </components.DropdownIndicator>
  );
};