react-select: 검사기에서 스타일링할 때 드롭다운을 열어두는 방법?

react-select: 검사기에서 스타일링할 때 드롭다운을 열어두는 방법?

리액트 셀렉트를 사용 중이고 커스터마이즈 중인데 이 일을 할 수 있는 옵션을 찾지 못했어요스타일링을 할 때 드롭다운을 열어둘 수 있는 방법이 있습니까?

Chrome에서 [Elements]> [ Event Listeners ]> [ open " blur " ]를 마우스로 열고 [Document]라고 써있는 곳 우측으로 이동하면 [Remove]버튼이 표시됩니다.

V2를 사용하는 경우menuIsOpen메뉴를 항상 열어두기 위해 사용할 수 있습니다.

Chrome을 사용하고 React Developer Tools 플러그인이 있는 경우 콘솔의 React 탭에서 구성 요소를 검사하고 브라우저에서 이 속성을 수동으로 전환할 수 있습니다.V1의 경우,isOpen같은 동작을 실현합니다.

그건 내 일이야.

menuIsOpen={true}

단순한 해킹은 이런 식으로 진행됩니다.

콘솔에서 이 명령을 실행하여 메뉴를 열고 5초간 기다리면 디버거가 자동으로 적용되고 화면이 고정됩니다.

setTimeout(() => {debugger;}, 5000)

사전에 실행하다window.onkeydown = () => {debugger}콘솔에서 드롭다운을 펼친 후 아무 키나 클릭합니다.

개발자 도구를 계속 열어 두는 것이 중요합니다.

도움이 될 수도 있습니다.

<Select 
   ref={el => (this.selectRef =el)}
   onBlur={() => {
     setTimeout(
       () => 
          this.selectRef.setState({
            menuIsOpen: true,
          }),
        50
     );
   }}
  />

Chrome React 확장을 사용하여 Select 구성 요소에서 "isOpen"(v3: "menuIsOpen") 상태 값을 true로 강제 설정할 수 있습니다.

자세한 내용은 이쪽:https://github.com/JedWatson/react-select/issues/927#issuecomment-313022873

를 사용할 수 있습니다.menuIsOpen리액트 셀렉트 문서에 나와있었는데 작동했어!문서: https://react-select.com/props 스크린샷:

Google Chrome을 사용하여 디버깅하는 경우.선택 드롭다운 위에 마우스를 올려놓고 ++ShiftC를 동시에 누를 수 있습니다. 그러면 디버깅 창에서 자동으로 선택됩니다.

선택 컴포넌트에서 이것을 소품으로 보냅니다.

menuIsOpen={true}

드롭다운을 열고 드롭다운을 마우스 오른쪽 버튼으로 클릭합니다.감찰관에게 물 한 방울을 흘려보낼 수 있을 거야이제 드롭다운에서 작업할 수 있습니다.

언급URL : https://stackoverflow.com/questions/49299042/react-select-how-to-keep-dropdown-open-when-styling-in-inspector