입력 onClick 및 onFocus 충돌

debugcn 에 게시 Dev

user3343396

나는이 <input>요소를, 그리고 콘텐츠 (표시 할 div포커스가있는 경우 입력 아래 참조).
또한 입력을 클릭 할 때마다 div.
문제는 입력이 집중되지 않는 경우, 모두 트리거 입력을 클릭보다 있다는 것입니다 onClick및 onFocus이벤트를, 그래서 onFocusHandler그래서 메뉴가 나타납니다하지만 immidately 그 후 처음 실행 onClickHandler실행을 숨 깁니다. 다음은 작동하지 않는 코드입니다.

import React from 'react';

const MyComp = props => {

    /*
    ...
    state: focused, showContent (booleans)
    ...
     */

    const onFocusHandler = () => {
        showContent(true);
        setFocused(true);
    }

    const onClickHandler = () => {
        if (focused) {
            showContent(false);
        } else {
            showContent(true);
        }
    }

    return (
        <>
            <input
                onFocus={onFocusHandler}
                onClick={onClickHandler}
            />
            {
                showContent &&
                <div>MyContent</div>
            }
        </>
    );
};

export default MyComp;

이 문제를 어떻게 해결할 수 있습니까?

드류리스

이것은 활성 토글이 초점을 맞추는 요소와 반대되는 매우 이상한 바람직한 동작입니다. 처음에는 당신이 원하는 행동을 성취 할 수있는 명확한 방법을 볼 수 없었습니다. 그러나 나는 그것이 달성 될 수 있다고 생각 했다.

onMouseDown핸들러 대신 핸들러를 사용하십시오 onClick.
onFocus핸들러를 사용 하여 추가 콘텐츠를 전환합니다.
onBlur핸들러를 사용 하여 추가 콘텐츠를 끕니다.

암호:

const MyComp = (props) => {
  const [showContent, setShowContent] = useState(false);

  const onFocusHandler = () => {
    setShowContent(true);
  };

  const onBlurHandler = () => {
    setShowContent(false);
  };

  const onClickHandler = () => {
    setShowContent((show) => !show);
  };

  return (
    <>
      <input
        onBlur={onBlurHandler}
        onFocus={onFocusHandler}
        onMouseDown={onClickHandler}
      />
      {showContent && <div>MyContent</div>}
    </>
  );
};

참고 : 그것은 주목해야한다 onMouseDown에 진정한 대체하지 않습니다 onClick. 최대 클릭 이벤트 마우스 아래로 이 그렇다면, 같은 요소에서 발생 할 수 있습니다. 사용자가 실수 로 입력을 클릭 했지만 드래그하여 놓으면 onClick이벤트가 실행되지 않아야합니다. 클릭 이벤트 전에 포커스 이벤트가 발생하므로 입력이 포커스를 받고 어쨌든 내용을 토글 할 수 있으므로 괜찮을 수 있습니다 . 아마도이 기발한 것은 귀하의 사용 사례에 적합합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

입력 onClick 및 onFocus 충돌

입력 onClick 및 onFocus 충돌

onclick시 앱 충돌

쉘 스크립트 내에서 입력 및 파이프 변수 충돌

사용자 이름 및 암호를 입력 할 때 UWP가 충돌 함

대화 상자 및 WebView를 표시하기 위해 ListItem의 onClick 충돌

ExecuteScalar 및 ExecuteNonQuery 충돌

okhttp 및 facebook 충돌

ScrollView 및 GridView 충돌

Realm 및 CocoaPods 충돌

입자 충돌

Onclick 입력 생성 및 입력 값 저장

Onclick 입력 생성 및 입력 값 저장

충돌 부트 스트랩, 프로토 타입 J 및 Jquery

상위 드래그 가능 및 하위 입력 유형 범위 간의 이벤트 충돌

테이블의 모든 ID 간의 SQL 시간 입력 및 시간 초과 충돌

React Hook-onFocus 및 onBlur

수입품 충돌

양식의 특정 입력 충돌

Azure DocumentDB 및 Spring Boot 충돌

OLEObjects 및 Userform 간의 충돌

Math.floor () 및 parseFloat () 충돌?

Math.floor () 및 parseFloat () 충돌?

Qtcreator 중단 및 충돌

Mootools accordian 및 Jquery와 충돌

충돌 감지 및 animateWithDuration

충돌 감지 및 종료

mod_rewrite 및 URL 충돌

Jquery 및 Socket.io 충돌

충돌 AVFoundation 및 AppKit Swift

Gedit 중단 및 충돌