입력 요소가 리액트 내에 집중되어 있는지 여부를 확인합니다.JS

입력 요소가 리액트 내에 집중되어 있는지 여부를 확인합니다.JS

다음과 같은 입력 요소가 현재 반응 내에 포커스를 맞추고 있는지 여부를 감지하려면 어떻게 해야 합니까?JS 렌더 함수?

<input type="text" style={searchBoxStyle} placeholder="Search"></input>   

에 대해 확인할 수 있습니다.document.activeElement입력 노드가 마운트되어 있고 그에 대한 참조가 있는 경우:

const searchInput = React.useRef(null)

if (document.activeElement === searchInput.current) {
  // do something
}

return <input type="text" ref={searchInput} />

또 다른 방법은 이벤트 청취자를 추가하는 것입니다.focus그리고.blur입력 필드 내의 이벤트:

const [focused, setFocused] = React.useState(false)
const onFocus = () => setFocused(true)
const onBlur = () => setFocused(false)

return <input type="text" onFocus={onFocus} onBlur={onBlur} />

노드의 포커스가 잡히거나 흐릿해질 때마다 재렌더가 호출된다는 점에 유의하십시오(단, 이것이 필요한 것입니다).

저는 데이비드가 두 가지 방법을 설명한 답변으로 시작했는데, 두 가지 방법 모두 저에게 효과가 있었지만, 저는 두 가지 모두에 대해 걱정했습니다.

1. 첫 번째 케이스에서는findDOMNode단점은 적어도 사용을 권장하지 않고 안티패턴으로 간주되는 방법으로 쉽게 구현할 수 있습니다.또, 가상 DOM 를 바이패스 해, 직접 DOM 를 조작하는 것으로써, 코드를 느리게 할 수도 있습니다.

2. 두 번째 옵션에서는 컴포넌트 상태를 작성 및 관리하여 답변이 너무 많은 작업인 것 같고 동기화가 잘 되지 않을 수 있으며 컴포넌트가 불필요하게 재렌더되는 원인이 될 수 있습니다.

그래서 이 문제를 더 자세히 알아보려고 노력한 후 다음과 같은 해결책을 생각해냈습니다.

if (this.props.id === document.activeElement.id) {
  // your code goes here
}

David의 답변에 대한 동일한 코멘트가 적용됩니다.

에서는, 이 조작을 실시하지 말아 주세요.render입력 노드가 아직 마운트되지 않았을 수 있기 때문에 메서드를 사용합니다.다음과 같은 라이프 사이클 방법을 사용합니다.componentDidUpdate또는componentDidMount.

장점:

• 현재 컴포넌트 속성(불변값)을 사용합니다.
• 상태 관리가 필요 없기 때문에 불필요한 재투입이 발생하지 않습니다.
• DOM을 통과할 필요가 없기 때문에 퍼포먼스는 최대한으로 향상됩니다.
• 컴포넌트 참조 작성 불필요

요건:

• 컴포넌트는id확인할 폼 요소에 전달되는 속성(어쨌든 가장 가능성이 높은 경우)

후크 사용:

먼저 레퍼런스를 만들고 초기화합니다.

const yourElement = useRef(null)

그런 다음 방금 작성한 참조로 요소에 태그를 지정합니다.

<div ref={yourElement}>Im an DOM node</div>

그런 다음 이 논리를 사용하여 비교합니다.document.activeElement문서 속성이 참조 중인 DOM 노드와 동일합니다.

yourElement.current === document.activeElement

후크를 사용하는 것이 훨씬 쉬운 접근법이 있습니다.

Import하다

import React, {useState} from "react";

정의

const [isMyInputFocused, setIsMyInputFocused] = useState(false);

그리고 당신이 선택한 입력에 추가만 하면 됩니다.

                    onBlur={() => setIsMyInputFocused(false)}
                    onFocus={() => setIsMyInputFocused(true)}

부터는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」isMyInputFocused원하시는 대로.

기능 컴포넌트를 사용하면 현재 입력에 포커스가 있는지 확인할 수 있습니다.

import React from "react";

export default function App() {
  const ref = React.createRef(null);

  const handleMouseOut = (currentRef) => {

    if (document.activeElement === currentRef) {
      console.log("Yesss");
    }
  };
  return (
    <div className="App">
      <input
        type="text"
        ref={ref}
        onMouseOut={() => handleMouseOut(ref.current)}
      />
    </div>
  );
}

라이브 예:https://codesandbox.io/s/reverent-allen-0qr8u

것에 , 「」를 사용할 수 .onFocus 17) (React 17)onBlur(React 16) 이러한 기능이 집중되었을 때 필요한 기능을 구현합니다.

언급URL : https://stackoverflow.com/questions/30619285/detect-whether-input-element-is-focused-within-reactjs