다음 예제 코드의 handleChange() 메서드는 콘솔에 값을 출력하고, event.target.value를 이용해서 상태를 갱신한다(ch07/uncontrolled/jsx/content.jsx).

 

예제 코드 7.7 변경을 감지하는 비제어 엘리먼트

class Content extends React.Component {
    constructor(props){
        super(props)
        this.state = {textbook: ''} ---- 기본값으로 빈 문자열을 설정한다.
        this.handleChange = this.handleChange.bind(this)
    }
    handleChange(event) {
        console.log(event.target.value)
        this.setState({textbook: event.target.value}) ---- 입력 영역에 변경이 있을 때 상태를 갱신한다.
    }
    render() {
        return <div>
            <input
                type="text"
                onChange={this.handleChange} ---- input에 value를 설정하지 않고 이벤트 리스너만 설정한다.
                placeholder="Eloquent TypeScript: Myth or Reality" />
            <br/>
            <span>{this.state.textbook}</span> ---- <span>을 이용해서 handleChange( ) 메서드에서 설정한 상태 변수를 출력한다.
        </div>
    }
}

---