[ React.js ] input, onChange 이벤트, 입력창 핸들링, 예제

 

안녕하세요 상훈입니다.

React.js 로 input 태그 내에 값을 입력하면 내용을 곧바로 h1 태그 내에 작성되게 하는 기능을 구현하겠습니다.

 <div id="root"></div>

    <script type="text/babel">
    class App extends React.Component {
        constructor (props){
            super(props)
            this.state = {
                text: '',
            }
            this.handleChange = this.handleChange.bind(this)
        }

        render () {
            return (
                <div>
                    <input type="text" 
                        value={this.state.text}
                        onChange={this.handleChange} />    
                    <h1>{this.state.text}</h1>
                </div>
            )
        }

        handleChange (event) {
            this.setState({
                text: event.target.value
            })
        }
    }

    const container = document.querySelector("#root")
    ReactDOM.render(<App />, container)

    </script>

지난번과 마찬가지로, 

root라는 id를 가진 div 태그를 생성하였습니다.

text = '' 로 놓고,  값이 변할때마다 handleChange() 함수를 호출하고, 그 값을 h1태그에 보여주는 형식입니다.