react-todolist代码优化
发布时间:2020-12-15 20:21:27 所属栏目:百科 来源:网络整理
导读:Todolist.js import React,{ Component,Fragment } from ‘react‘ ;import TodoItem from ‘./TodoItem‘ ;import ‘./style.css‘ ;class Todolist extends Component { constructor(props) { // 最优先执行的函数 super(props); this .state= { inputValu
Todolist.js import React,{ Component,Fragment } from ‘react‘; import TodoItem from ‘./TodoItem‘; import ‘./style.css‘; class Todolist extends Component { constructor(props) { //最优先执行的函数 super(props); this.state={ inputValue:‘‘,list:[] } this.handleinputChange=this.handleinputChange.bind(this); this.handlebuttonClick=this.handlebuttonClick.bind(this); this.handleItemdelt=this.handleItemdelt.bind(this); } render() { return ( <Fragment> <div> {/*这是一个todolist*/} <label htmlFor=‘insertArea‘>输入内容</label> <input id="insertArea" className=‘input‘ value={this.state.inputValue} onChange={this.handleinputChange} /> <button onClick={this.handlebuttonClick}> 提交 </button> </div> <ul> {this.getTodoItem()} </ul> </Fragment> ); } getTodoItem(){ return this.state.list.map((item,index)=>{ return( <TodoItem key={index} index={ index } item={ item } deleteItem={this.handleItemdelt} /> ) }) } handleinputChange(e){ const value=e.target.value; this.setState(()=>({ inputValue:value })); // this.setState({ // inputValue:e.target.value // }) } handlebuttonClick(e){ this.setState((prevState)=>{ return{ list:[...prevState.list,prevState.inputValue],inputValue:‘‘ } }); // this.setState({ // list:[...this.state.list,this.state.inputValue], // inputValue:‘‘ // }) } handleItemdelt(index){ // immutable // state 不允许我们坐任何的改变 this.setState((prevState)=>{ const list=[...prevState.list]; list.splice(index,1); return{list} }) // const list=[...this.state.list]; // list的一个副本 // list.splice(index,1); // this.setState({ // list:list // }) } } export default Todolist; TodoItem.js import React,{ Component } from ‘react‘; class TodoItem extends Component{ constructor(props){ super(props); this.handleclick=this.handleclick.bind(this); } render(){ const { item }=this.props; return (<li onClick={this.handleclick} dangerouslySetInnerHTML={{__html:item}} ></li> ) } handleclick(){ const {deleteItem,index}=this.props; deleteItem(index); } } export default TodoItem; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |