onClick 이벤트가 설정된 React Hook으로 img src 변경
DanShafi
이 문제를 해결하기 위해 다양한 방법을 시도했지만 해결책을 찾을 수없는 것 같습니다. 간단히 말해서 이것은 내 React 앱에서 다크 모드 토글을 만드는 해키 한 방법입니다.
기본적으로 onClick 이벤트가 발생할 때 이미지 src가 변경되기를 바랍니다. onClick에 다른 기능을 추가하려고 시도했지만 React는 무한 루프에 대한 오류를 발생시킵니다.
const App = () => {
const [lightMode, setLightMode ] = React.useState(false)
return (
<Router>
<div className={lightMode ? "light-mode" : "dark-mode"}>
<Container>
<Navbar.Brand className={lightMode ? "light-mode" : "dark-mode"} href="/">Built By Dan.</Navbar.Brand>
<img
className="mode-switch ml-auto"
onClick={() => setLightMode(prevMode => !prevMode)}
src="/media/bolt.png"
alt="lightning-bolt"
height="30px"
/>
</Container>
</Router>
소스를 변경하는 방법을 잘 모르겠습니다. SCSS와 삼항 연산자를 시도했지만 아무것도 작동하지 않는 것 같습니다.
여기에 도움을 주시면 대단히 감사하겠습니다. 내가하고 싶은 것은 누군가가 이미지를 클릭 할 때 이미지를 변경하고 색 구성표 사이를 전환하는 것입니다.
미리 감사드립니다!
드류리스
src두 소스 URL을 서로 바꾸 려면 이미지 에 삼항을 사용하십시오 .
<img
className="mode-switch ml-auto"
onClick={() => setLightMode(prevMode => !prevMode)}
src={lightMode ? "/path/to/img1" : "path/to/img2"}
alt="lightning-bolt"
height="30px"
/>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
img src 변경시 이벤트 발생
- 2
socket.io 이벤트로 설정된 후 이미지 src를 변경하는 방법은 무엇입니까?
- 3
자바 스크립트 : img src onclick 변경은 한 번만 작동합니다.
- 4
onClick img를 새 img로 변경하고 원본으로 돌아 가기
- 5
img src 속성이 변경된 슬라이드 쇼
- 6
모든 <img>에서 src를 가져와 배경으로 css로 설정하십시오.
- 7
Html Agility Pack으로 img src 설정
- 8
가상 img src를 실제 경로로
- 9
로드시 Javascript 변경 img src
- 10
onClick 이벤트로 개체 값 변경
- 11
설정된 변수 번호에서 img src 스와핑 중지
- 12
img에 : active가 설정된 경우 두 번째 클릭시 onClick이 호출됩니다.
- 13
ImageButton Src 이미지 OnClick 변경
- 14
C # .NET 코드에서 JavaScript로 변경된 img src를 얻는 방법
- 15
React.js에서 'onclick'기능으로 특정 div의 배경 이미지를 변경하는 방법
- 16
jquery로 동적으로로드 된 이미지의 src 변경
- 17
iframe 변경 src 이벤트
- 18
클래스 특정 단어가있는 경우 img src를 td img로 바꿉니다.
- 19
클래스 특정 단어가있는 경우 img src를 td img로 바꿉니다.
- 20
업로드 된 파일 이름이 변경되었을 때 img src 디렉토리에 확장자를 추가하는 방법은 무엇입니까?
- 21
자바 스크립트를 사용하여 리퍼러 URL을 기반으로 IMG SRC 변경
- 22
동적으로 생성 된 React 구성 요소에 OnClick 이벤트 연결
- 23
img의 src 속성을 동적으로 설정
- 24
HTML onClick 이벤트에 첨부 된 변수를받는 jQuery 함수 설정
- 25
Vue img src 경로가 : src와 동일하게 작동하지 않습니다.
- 26
이미지 목록에 동적으로 onclick 이벤트 설정
- 27
onclick으로 수정 된 라디오 버튼에서 값을 가져 오거나 이벤트를 클릭하면 undef 답변이 제공됩니까?
- 28
정규식을 사용하여 img src 변경
- 29
img src의 값이 JS 클릭 이벤트에 의해 변경되면이 값을 보유한 페이지를 뒤로 버튼으로 다시 방문 할 때이 값이 비어 있지 않은 이유는 무엇입니까?
몇 마디 만하겠습니다