김평범's OrdinaryCode

  • 홈
  • 태그
  • 방명록

리액트inputfocus 1

[react 간단 예시] input box에 focus 후 초기화 하는 방법 (리액트 ref 이용하기)

react Ref 이용하기 react에서 직접 DOM에 접근해서 작동시켜야하는 때가 있다. 오늘 가져온 경우는 input에 focus를 줘보는 예시를 만들어보았다. react의 ref를 사용하면 컴포넌트 내부에 있는 DOM에 직접 접근을 할 수 있다. 예시 코드 가장 기본적인 App 컴포넌트를 하나 만들어주었다. 이름을 입력받을 input과 버튼을 클릭하면 input 내용을 초기화한 뒤 포커스를 해주는 버튼을 만들어 보도록 하겠다. import {Component} from "react"; class App extends Component { constructor(props) { super(props); this.state = { name:'이름' } } inputFocus = () =>{ this.se..

FrontEnd/React 2021.09.15
1
더보기
  • 분류 전체보기 (203)
    • Diary (4)
    • FrontEnd (109)
      • Javascript (20)
      • Vue.js (34)
      • css (17)
      • React (11)
    • etc. (88)
      • Notion (71)

Tag

Notion템플릿공유, 리액트, NUXT, CSS, 노션활용법, 노션템플릿, 노션가이드, Vue, JavaScript, 노션사용법, 노션표, 노션템플릿공유, notion, 노션, 노션유용한템플릿, react, 노션가계부, 노션수식, 노션무료템플릿, 노션데이터베이스,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Copyright © Kakao Corp. All rights reserved.

티스토리툴바