5.2.3.2 버튼 onClick 이벤트 코드 수정

버튼에서 onClick 이벤트가 발생할 때 input에 포커스를 주도록 코드를 수정해 보세요. 이제 this.input이 컴포넌트 내부의 input 요소를 가리키고 있으니, 일반 DOM을 다루듯이 코드를 작성하면 됩니다.

ValidationSample.js - handleButtonClick 메서드

handleButtonClick = () => {
  this.setState({
    clicked: true,
    validated: this.state.password === '0000'
  });
  this.input.focus();
}

---

 

코드를 저장하고, 웹 브라우저에서 페이지를 열어 버튼을 눌러 보세요. 포커스가 input으로 바로 넘어가나요?

▲ 그림 5-6 input으로 넘어간 포커스