How to bind events and Uni-Directional Data Flow.
Download Demo Code: Download
Index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import TodoItem from './component/TodoItem.js' class TodoList extends React.Component { constructor(){ super(); this.changeStatus=this.changeStatus.bind(this); this.state={ tasks:[{ name:'PHP', completed:false }, { name:'NodeJS', completed:false }, { name:'ReactJS', completed:false } ] } } changeStatus(index){ var tasks=this.state.tasks; var task=this.state.tasks[index]; task.completed=!task.completed; this.setState({ tasks:tasks }); } render() { return ( <ul > { this.state.tasks.map((task,index)=>{ return (<TodoItem key={task.name} index={index} clickHandler={this.changeStatus} detail={task} />) }) } </ul> ) } } ReactDOM.render( <TodoList / > , document.getElementById('root')) |
component/TodoItem.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React from 'react'; // class TodoItem extends React.Component{ // render(){ // return ( // <li onClick={ ()=>this.props.clickHandler(this.props.index)} className={this.props.detail.completed ? 'completed' : ''} >{this.props.detail.name}</li> // ) // } // } const TodoItem=(props)=>{ return (<li onClick={ ()=>props.clickHandler(props.index)} className={props.detail.completed ? 'completed' : ''} >{props.detail.name}</li>) } export default TodoItem; |
More Stories
Installation of ReactJS
Deep Dive in JSX – ReactJS
State and Props in ReactJS