代碼如下：

function ToDoListHeader(props) {return <h1 className={props.className}>ToDoList</h1> } class CheckAll extends Component{changeAll(event){this.props.selectedChange('all',event.target.checked);}batchDel(){this.props.batchDel();}render(){if(this.props.totalLen > 0){return <div className="ctr"><label htmlFor="all"><input type="checkbox" id="all" onChange={this.changeAll.bind(this)} checked={this.props.totalLen <= this.props.selectedLen}/>{this.props.totalLen <= this.props.selectedLen ? '取消全選' :'全選'}</label><span className="batchDel" onClick={this.batchDel.bind(this)}>批量刪除</span></div>} else {return null;}} } class InputBox extends Component{constructor(props){super(props);this.state = {value:''}}handleKeyDown(event){if(event.keyCode === 13 && this.state.value.replace(/\s/g,'').length > 0){this.setState({value:''});this.props.addToDoList(this.state.value);}}handleChange(event){this.setState({value:event.target.value})}render(){return (<from className="inputBox"><input type="text" className="input" value={this.state.value} onKeyDown={this.handleKeyDown.bind(this)} onChange={this.handleChange.bind(this)} placeholder="請輸入..."/><CheckAll totalLen={this.props.totalLen} selectedChange={this.props.selectedChange} selectedLen={this.props.selectedLen} batchDel={this.props.batchDel}/></from>)} } class ToDoItem extends Component{delItem(){this.props.delToDoItem(this.props.index);}changeCheck(event){this.props.changeCheck(this.props.index,event.target.checked);}render(){return <li><input type="checkbox" onChange={this.changeCheck.bind(this)} checked={this.props.checked}/><span>{this.props.label}</span><span className="del" onClick={this.delItem.bind(this)}>X</span></li>} } class ToDoList extends Component{render(){const listItem = Object.keys(this.props.listItems).map((key) => {return <ToDoItem label={this.props.listItems[key]} key={key} index={key} delToDoItem={this.props.delToDoItem} changeCheck={this.props.changeCheck} checked={this.props.selectedList[key]}/>});return <ul className="list">{listItem}</ul>} } function ListFooter(props) {return <span className="info">一共{props.length}條</span> } class ToDoListBox extends Component{constructor(props){super(props);this.state = {// 列表list:{},// 被選中的列表項 {0:true,1:true}selectedList:{}}}// 向列表中添加條目addToDoList(item){this.setState((prevState) => {// 保證列表中的key不會重復const keys = Object.keys(prevState.list).sort();const nextKey = keys.length > 0 ? keys[keys.length-1] * 1 + 1 : 0;const list = Object.assign(prevState.list,{[nextKey]:item});return {list:list}})}// 從列表中刪除條目delToDoItem(index){this.setState((prevSate) => {delete prevSate.list[index];return {list:prevSate.list}});this.selectedChange(index,false)}// 批量刪除batchDel(){Object.keys(this.state.selectedList).forEach((key) => {this.delToDoItem(key);this.selectedChange(key,false);})}selectedChange(key,checked){// 取消全選if(key === 'all' && !checked){this.setState({selectedList:{}});return;}// 全選if(key === 'all' && checked){const list = this.state.list;let selectObj = {};Object.keys(list).forEach((key) => {selectObj[key] = true});this.setState({selectedList:selectObj});return;}// 選擇或取消選擇某一個this.setState((prevState) => {if(checked && !prevState.selectedList[key]){return {selectedList:Object.assign(prevState.selectedList,{[key]:true})}}if(!checked && prevState.selectedList[key]){delete prevState.selectedList[key];return {selectedList:prevState.selectedList}}})}render(){const selectedLen = Object.keys(this.state.selectedList).length;const listLen = Object.keys(this.state.list).lengthreturn (<div><InputBoxaddToDoList={this.addToDoList.bind(this)} totalLen={listLen}selectedLen={selectedLen} selectedChange={this.selectedChange.bind(this)} batchDel={this.batchDel.bind(this)}/><ToDoList listItems={this.state.list} delToDoItem={this.delToDoItem.bind(this)} changeCheck={this.selectedChange.bind(this)} selectedList={this.state.selectedList}/><ListFooter length={listLen}/></div>)} } class App extends Component {render() {return (<div className="warp"><logo/><ToDoListHeader className="header"/><ToDoListBox/></div>);} }

?

轉(zhuǎn)載于:https://www.cnblogs.com/QxQstar/p/7536916.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的react——一个todolist的demo的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。