발행물

좋아, 내가 예상했던 것과 똑같다. 당신은 동봉 한 일부 focus 독립적으로의 변이 된 "의 keyup"이벤트 핸들러에서 값 focus존재 각 주요 구성 요소 본문에주기를 렌더링 재설정 useEffect할 때 종속성 업데이트 후크를.

이 효과에 대한 코드 및 상자에 반응 린트 경고도 있습니다.

React Hook useEffect 내부에서 'focus'변수에 대한 할당은 각 렌더링 후 손실됩니다. 시간이 지남에 따라 값을 보존하려면 useRef 후크에 저장하고 '.current'속성에 변경 가능한 값을 유지하십시오.

해결책

1. 모든 콜백 인스턴스와 후크가 동일한 안정된 값을 참조 할 수 있도록 "focus"값을 React ref에 저장합니다 .
2. 또한 별도의 useEffect후크를 사용하여 "keyup"이벤트 리스너를 관리하고 구성 요소가 마운트 해제 될 때이를 제거하는 정리 기능을 사용하는 것이 좋습니다 . 이렇게하면 효과 콜백이 트리거 될 때 마다 새 리스너가 추가되는 것을 방지 할 수 있습니다 ( 코드가 렌더링 할 때마다 리스너를 추가했습니다 !! ).
3. "autocomplete__container"직접 DOM 쿼리 및 조작이 React에서 안티 패턴으로 간주 되므로 컨테이너 를 참조하기 위해 React ref를 사용하는 것이 좋습니다 .

암호:

function App() {
  const [value, setValue] = useState("");
  const [items, setItems] = useState([]);
  const [query, setQuery] = useState([]);
  const [formSubmit, setFormSubmit] = useState(false);
  const [completions] = useAutocomplete(value, autocompleteValues);

  const autocompleteContainer = useRef(); // <-- ref to get DOMNode
  const focusRef = useRef(-1); // <-- ref to store stable focus value

  ...

  // Effect hook to manage keyup event handler and cleanup
  useEffect(() => {
    const handleKeypress = (event) => {
      if (event.keyCode === 38 && focusRef.current >= 1) { // <-- focus.current
        focusRef.current -= 1;
        autocompleteContainer.current.childNodes[focusRef.current].focus(); // <-- autocompleteContainer.current
      } else if (
        event.keyCode === 40 &&
        focusRef.current < autocompleteContainer.current.childElementCount - 1
      ) {
        focusRef.current += 1;
        autocompleteContainer.current.childNodes[focusRef.current].focus();
      } else if (
        event.keyCode === 13 &&
        document.activeElement.className !== "form-control"
      ) {
        setValue(document.activeElement.innerHTML);
        setQuery(document.activeElement.innerHTML);
        document.getElementsByClassName(
          "autocomplete__container"
        )[0].style.display = "none";
        setFormSubmit(true);
      }
    };

    window.addEventListener("keyup", handleKeypress); // <-- add listener

    return () => window.removeEventListener("keyup", handleKeypress); // <-- return cleanup function to remove listener
  }, []);

  // Effect hook to reset focus value when list updates
  useEffect(() => {
    focusRef.current = -1;
    console.log("focus reset", focusRef.current);
  }, [value, items]);

  return (
    <div className="App">
      <Form id="search__form" onSubmit={handleSubmit}>
        <Form.Group>
          <InputGroup className="mb-3">
            ...
            <div
              ref={autocompleteContainer} // <-- attach DOM ref here
              className="autocomplete__container"
            >
              {completions.map((val, index) => (
                <p
                  tabIndex={index + 10}
                  key={index}
                  onClick={() => updateInput({ val })}
                >
                  {val}
                </p>
              ))}
            </div>
          </InputGroup>
        </Form.Group>
      </Form>
      <p>{focusRef.current}</p>
    </div>
  );
}