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;

?

轉載于:https://www.cnblogs.com/Lolita-web/p/9875642.html

總結

以上是生活随笔為你收集整理的react todolist代码优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。