[ React.js ] Checkbox event, 체크박스 체크 이벤트, 예제

 

안녕하세요 상훈입니다.

React로 체크박스 클릭시, text부분의 색을 변경하고 줄을 긋는 기능을 구현하려고합니다.

 

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

    <script type="text/babel">
        class App extends React.Component {
            constructor (props) {
                super(props)
                this.state = {
                    checked : false
                }
                this.handleClick = this.handleClick.bind(this)
            }
            
            render () {
                const textStyle = {
                    color : this.state.checked ? 'blue' : 'red',
                    textDecoration : this.state.checked ? 'line-through' : 'none'
                }
                return (
                    <div>
                        <input type="checkbox" id="checkboxItem"
                            onClick = {this.handleClick} />    
                        <label for="checkboxItem">선택해주세요</label>
                        <h2 style={textStyle}>Text</h2>
                    </div>
                )
            }

            handleClick (event) {
                this.setState ({
                    checked : event.target.checked
                })
            }
        }

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

render 함수 내 상수 선언

render 함수 내의 상수를 선언해놓고 이를 삼항연산자( x ? y : z) 를 사용하여 해당 기능을 구현하였습니다.