-
[생활코딩] create 구현 : mode 변경 기능REACT 2022. 2. 1. 13:55
생활 코딩 https://www.youtube.com/watch?v=MDGFEV_idSY
Control.js 파일을 만들고 App.js 에 load 한다.
Control component에 onChangeMode 이벤트를 정의하고 event handler를 추가한다.
<Control onChangeMode={function(_mode){ this.setState({ mode:_mode }) }.bind(this)}> </Control>
그리고 Control.js 에서 각 버튼을 클릭했을 때 onChangeMode event handler가 작동될 수 있도록 onClick을 추가해준다.
import React,{Component} from 'react'; class Control extends Component{ render(){ return ( <ul> <li><a href="/create" onClick={function(e){ e.preventDefault(); this.props.onChangeMode('create'); }.bind(this)}>create</a></li> <li><a href="/update" onClick={function(e){ e.preventDefault(); this.props.onChangeMode('update'); }.bind(this)}>update</a></li> <li><input onClick={function(e){ e.preventDefault(); this.props.onChangeMode('delete'); }.bind(this)} type="button" value="delete"></input></li> </ul> ); } } export default Control;
728x90'REACT' 카테고리의 다른 글
[생활코딩] create 구현 : mode 전환 기능 / form / onSubmit 이벤트 /contents 변경 / shouldComponentUpdate / Array.from / Object.assign (0) 2022.02.01 [생활코딩] 컴포넌트 이벤트 만들기 3 (0) 2022.02.01 [생활코딩] 컴포넌트 이벤트 만들기2 (0) 2022.01.31 [생활코딩] 컴포넌트 이벤트 만들기1 (0) 2022.01.31 [생활코딩] 이벤트에서 state 변경하기 / bind함수 / setState함수 (0) 2022.01.31