效果如下：
image.png
分析組件：
1.頭部：標題
2.內(nèi)容：列表項+刪除
3.尾部：添加列表項
4.包裹所有組件的App.js，在這個大的組件包含所有的屬性及操作
image.png
標題
//header.js
import React,{Component } from 'react';
import "./header.css"
class Header extends Component{
render(){
return (
<div className="header">
任務便簽
</div>
)
}
}
export default Header
在App.js引出：
<Header />
尾部添加
分析：
1.因為所有的操作都會在App.js里面去操作，所以子組件的所以初始化的屬性都需要通過父組件傳值給子組件藕筋；比如輸入框的value屬性值
2.通過onChange事件獲取用戶輸入的值牍帚，試想：怎么讓用戶輸入的值顯示在輸入框里面呢：也就是說我怎么把輸入的值賦值給父組件的value骚露，這就需要使用子組件觸發(fā)父組件的函數(shù)孽江，并傳值給父組件：this.props.這個方法（傳的值）
3.當點擊添加按鈕的時候辜腺，我需要將輸入的值追加到定義的List,同樣在子組件點擊按鈕默勾，觸發(fā)父組件的方法
footer.js
class Header extends Component{
handleInput(e){
this.props.handleInput(e.target.value)
}
handleAdd(){
this.props.handleAdd()
}
render(){
return (
<div className="footer">
<input type="text" value={this.props.value} onChange={this.handleInput.bind(this)}>
<button onChlick={this.handleAdd.bind(this)}>添加</button>
</div>
)
}
}
//父組件
constructor(props) {
super(props)
this.state = {
list: [{
name: 'learn english',
status: 0
}, {
name: 'Learn guitar',
status: 0
}, {
name: 'weight less than 100',
status: 0
}, {
name: 'have 100,000 deposit',
status: 0
}],
value:"",
}
}
//父組件接受子組件傳的值
handleInput(val){
this.setData({
value:val
})
}
handleAdd(){
if(!this.state.value){
return false
}
this.setState({
list:[...this.state.list,{
name:this.state.value,
status:0,
}],
value:""
})
}
render{
return (
<Footer value={this.state.list} handleInput={this.handleInput.bind(this)} handleAdd={this.handleAdd.bind(this)} />
)
}
中間列表項
分析：
1.列表項是由一個單選框碉渡，名字，刪除按鈕
2.因為列表項可能會有很多母剥，則使用map方法
3.單選框的選中狀態(tài)是由List的status為1才表示已選中爆价，當選中狀態(tài)發(fā)生改變時，怎么讓list的status實時去改變呢媳搪，所以需要出發(fā)父組件的方法铭段，
4.當該列表項為選中時，則該文字會加上刪除線：利用text-decoration-line:值為"line-through"時表示文字中間部分畫線
5.點擊刪除按鈕是需要刪除當前用戶點擊的那一行秦爆，所以怎么判斷用戶是當前那一行是一個問題：
6.已完成的數(shù)量是表示status為1的個數(shù)
// this.handleclick.bind（this序愚，要傳的參數(shù)） handleclick（傳過來的參數(shù)，event）
class ListItem extends Component{
handleFished(name){
// 子組件向父組件傳值
// 在子組件點擊的li得到的值等限，交給父組件去做交互
this.props.handleFished(name);
}
handleDelete(name){
this.props.handleDelete(name)
}
render(){
return (
<ul>
{this.props.data.map((item,index)=>{
return (
<li key={index} className="listItem">
<input type="checkbox" checked={item.status===1} onChange={this.handleFished.bind(this,item.name)} />
<span style={{textDecorationLine:item.status===0?'none':'line-through'}}>{item.name}</span>
<button className="delete" onClick={this.handleDelete.bind(this,item.name)}>刪除</button>
</li>
)
})}
<li>已完成:{this.props.finished}/總數(shù):{this.props.data.length}</li>
</ul>
)
}
}
export default ListItem
父組件：
constructor(props) {
super(props)
this.state = {
list: [{
name: 'learn english',
status: 0
}, {
name: 'Learn guitar',
status: 0
}, {
name: 'weight less than 100',
status: 0
}, {
name: 'have 100,000 deposit',
status: 0
}],
finished:0,//已完成的個數(shù)
}
}
handleFished(name){
const list=[];
let sum=0;
this.state.list.forEach((item,index){
//判斷用戶點擊的是當前所點擊的那一行
if(item.name=name){
let val=this.state.list[index]
let obj={
name:val.name,
status:val.status===0?1:0
}
list.push(Object.assign({},obj))
this.setState({
list:list
},()=>{
this.state.list.forEach(item=>{
if(item.status===1){
sum++;
}
this.setState({
finished:sum
})
})
})
} else{
list.push(item)
}
})
}
handleDelete(name){
let arr=this.state.list.filter((item)=>{
return item.name!==name
})
this.setState({
list:arr
})
}
render(){
return(
<ListItem data={this.state.list} finished={this.state.finished} handleFished={this.handleFished.bind(this)} handleDelete={this.handleDelete.bind(this)} />
)
}
