안녕하세요 상훈입니다.
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태그에 보여주는 형식입니다.
반응형
'FrontEnd > React.js' 카테고리의 다른 글
| [ React.js ] 체크박스, 체크 이벤트, 타이머, 스톱워치 응용 가능, 예제 (0) | 2021.09.01 |
|---|---|
| [ React.js ] Checkbox event, 체크박스 체크 이벤트, 예제 (0) | 2021.09.01 |
| [ React.js ] 클릭 이벤트 구현 , 버튼 클릭 시 값 증가, 예제 (0) | 2021.09.01 |
| [ React.js ] 에러 VM42:9 Uncaught TypeError: Super expression must either be null or a function, not undefined (0) | 2021.09.01 |
| [ React.js ] 현재 시각 시계 만들기 예제 (0) | 2021.08.30 |
