生活随笔
收集整理的這篇文章主要介紹了
React基础（伍）———【案例】todoList
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果
import React, { Component
} from
"react";export default class App extends Component {constructor(props) {super(props
);this.state = {myref: React.createRef(),list: [{id: 1
,text: "1111",},{id: 2
,text: "2222",},]
,};}render() {return (<div><input ref={this.state.myref
}></input><buttononClick={() => {this.
handleClick4(); //推薦 傳參使用
}}>add4</button><ul>{this.state.list.map((item, index) => {return (<li key={item.id
}>{item.text
}<buttononClick={() => {this.
handleDelClick(index
);}}>del</button></li>
);})}</ul>{this.state.list.length === 0 ? <div>暫無代辦事項</div>
: null
}</div>
);}handleClick4 = () => {console.
log("click4", this.state.myref.current.value
);//不要直接修改狀態，會造成不可預期的問題。// this.state.list.
push(this.state.myref.current.value
)//對于數組指向同一個實體let newList = this.state.list
;newList.push({id: Math.
random() * 100000
, //生成不同ID的函數
text: this.state.myref.current.value
,});this.setState({list: newList
,});//清空輸入框this.state.myref.current.value =
"";};handleDelClick = (index) => {console.
log("del", index
);//拷貝一個實體let newList = [...this.state.list]
;// let newList = this.state.list.
concat()//splice 刪除數組元素的方法newList.
splice(index
, 1
);this.setState({list: newList
,});};
}
總結
以上是生活随笔為你收集整理的React基础（伍）———【案例】todoList的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
