React: 여러 항목 선택-선택한 항목 (항목)으로 스크롤하지 않습니다.

흥미 롭다! React 16.0에서 선택한 항목이 할당 된 방식이 변경되었는지 궁금합니다.

다음 파일을 살펴 보았습니다.

-https :

-https :

슬프게도 그다지 큰 차이를 찾을 수 없었습니다. (내 도움이 부족해서 미안하지만 어떻게 해결 될지 또는 내가 잘못된 곳을보고 있었는지 궁금합니다.)

걱정 마! 그것들은 내가 보는 첫 번째 장소이기도합니다. 한 가지 차이점은 React 16.x가 defaultSelected 뒤에 selected defaultSelected 할당한다는 것입니다.

https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMFiberSelect.js#L95

이것이 React를 던지고 있는지 궁금합니다. 지금은 직접 테스트 할 수 없지만 중단 점을 설정하고이 루프를 통과하면 스크롤이 변경되는 것을 볼 수 있는지 궁금합니다.

안녕하세요 Nathan, 몇 시간 동안이 문제를 조사해 왔으며 react 15.6.2 및 16.3.2를 설치했습니다. 프로그램 실행을 몇 가지 중단 점으로 추적 할 수있었습니다. 함수처럼 보입니다.

updateOptions

"select"가있는 옵션 속성 중 하나를 true (좋음)로 설정하고 selectedIndex도 4 (좋음)로 설정하지만 여기에서 요소가 원하는 방식으로 인쇄되지 않는 이유를 알 수 없습니다. 괜찮은 것 같습니다. 또한 defaultSelected 전에 selected defaultSelected 할당하는 것 사이에 차이가 없음을 알았습니다.

디버거를 통해 실행했을 때 selected 및 defaultSelected (사용하는 유형에 따라 다름) 모두 적절한 <option> DOM 요소에 true 속성으로 올바르게 설정됩니다. .

16.3.2 예제에서는 전달 된 값을 여전히 선택하고 스크롤하지 않습니다. 렌더러에서 해당 값 속성이 평가 / 확인되고 동작이 변경되는 다른 곳이 있습니까? 나는 찔러 보았지만 파싱 할 코드가 많이 있습니다.

이것이 얼마나 도움이되는지 확실하지 않지만 @ kre0n 링크를 사용하여 문제가 처음 발생하기 시작한 React 빌드를 찾기 위해 작은 테스트를 수행했습니다. 테스트를 위해 codesandbox의 인터페이스를 사용하여 React의 각 버전을 제거하고 다시 설치했습니다.

내가 관찰 한 바에 따르면 16.0.0 릴리스 이후의 모든 시켰 습니다. 15.6.2 가 작동한다는 사실을 알고 나는 문제가 처음 발생하기 시작할 때까지 16.0.0-alpha 에서

선택이 빌드 16.0.0-alpha.3 의 선택 요소에 제공된 '값'으로 스크롤을 멈춘 것을 발견했습니다.

나중에 빌드에서 수정되었는지 테스트하지 않았지만 첫 번째 실패 지점이 어떤 식 으로든 도움이 될 수 있다고 생각했습니다.

안녕하세요. 이러한 원치 않는 동작의 원인을 파악한 것 같지만 적절한 수정 사항을 조사하려면 시간이 더 필요합니다. 그래서 아무도 신경 쓰지 않는다면이 문제를 받아들이고 프로젝트에 대한 첫 번째 약속을하고 싶습니다.

최신 정보. 제가 생각했던 것보다 문제가 좀 더 복잡한 것 같습니다. 저는이 동작이 리 액트 파이버 아키텍처에 도입되었다고 확신합니다. 시간이 얼마나 걸릴지 모르겠지만 계속 고쳐 보겠습니다. 이전에 구현 세부 정보를 다루지 않았으므로 시간이 걸릴 수 있습니다.

죄송합니다. 나는 많은 여행을하고있다. :) 이것은 정말 어려운 문제인 것 같다.

@segoddnja 나는 이것을 당신에게 할당 할 것이지만 이것에 많은 시간을 할애하지 않아도됩니다. 가설을 찾아 내고 우리는 그것을 해결하기 위해 함께 노력할 수 있습니다.

스크롤을 멈출 수있는 무언가가 미리 선택 항목에 발생하는지 궁금합니다. 스크롤 중지로 이어질 수있는 속성 / 속성 할당 순서가 있는지 궁금합니다.

다음은 흥미로운 현상입니다. 다음 단계가 발생한다고 가정 해 보겠습니다.

https://codepen.io/nhunzaker/pen/vaZxvE

1. 6 가지 옵션 제공
2. 첫 번째 옵션을 선택합니다.
3. 여섯 번째 옵션을 선택합니다.
4. 첫 번째 옵션을 선택 취소합니다.

여섯 번째 옵션 만 선택한 경우에도 스크롤은 여전히 ​​첫 번째 옵션에 초점을 맞 춥니 다.

어쨌든 Chrome은 _unassigned가 아닌 _assigned_ 일 때 처음 선택한 값으로 만 스크롤합니다.

아마도 이것은 관련이 있습니다.

@nhunzaker 네, 감사합니다. 올바른 방향으로 생각합니다. 브라우저는 선택된 속성이 true 인 첫 번째 옵션으로 스크롤합니다. 더 이상 변경해도 스크롤이 발생하지 않습니다.

그래서 내가 지금 발견 한 것. React는 베어 selest 노드를 생성하고 여기에 옵션을 추가합니다. 베어 select 가 multipe=false 이므로 첫 번째 추가 옵션은 자동으로 selected=true 얻습니다. 따라서 다중 모드로 더 전환하고 옵션 선택을 업데이트해도 스크롤되지 않습니다.

옵션을 추가하기 전에 multiple 속성 값을 설정해야한다고 생각합니다.