React todoList 没拆分时代码
import React from 'react'
class TodoList extends React.Component{
constructor(props){
super(props)
this.state={
username:'',
list:[
{
title:'录制html',
checked:false,
},
{
title:'录制css',
checked:true,
},
{
title:'录制vue',
checked:false,
},
{
title:'录制jq',
checked:true,
},
]
}
}
checkBoxChange(val,key){
console.log(val,key)
var list=this.state.list
list[key].checked=!val.checked
this.setState({
list:list
})
}
handelAdd=(e)=>{
console.log(e.target.value)
this.setState({
username:e.target.value
})
}
Add=()=>{
var temp=this.state.list
let title=this.state.username
temp.push({title:title,checked:false})
console.log(this.state.username)
this.setState({
temp,
})
}
Del(key){
console.log(key)
var temp=this.state.list
temp.splice(key,1)
this.setState({
temp,
})
}
render(){
return (
<div>
<input onChange={this.handelAdd }/>
<button onClick={this.Add}>增加</button>
<hr/>
<h3>进行中</h3>
<ul>
{
this.state.list.map((val,key)=>{
if(val.checked){
return(
<li key={key}>
<input type="checkbox" onChange={this.checkBoxChange.bind(this,val,key,)} checked={val.checked}/>
{val.title}
<button onClick={this.Del.bind(this,key)}>删除</button>
</li>
)
}
})
}
</ul>
<h2>已完成</h2>
<ul>
{
this.state.list.map((val,key)=>{
if(!val.checked){
return(
<li key={key}>
<input type="checkbox" onChange={this.checkBoxChange.bind(this,val,key)} checked={val.checked}/>
{val.title}
<button onClick={this.Del.bind(this,key)}>删除</button>
</li>
)
}
})
}
</ul>
</div>
)
}
}
export default TodoList
小小TodoList 却涵盖很多知识点
1 ·定义输入框事件 取输入框事件的值
2. this指向问题
3. 更改state里面的数据用this.setState({})
4. .改变this 时的传值 问题
5. react 渲染列的 的灵活性
6. 单选框的值的改变
以上问题在上面列子中体现的淋漓尽致 请认真阅读代码 以及注释
下面我们要对这个 todoList 组件进行拆分 建立大家阅读体会官方文档 React 哲学部分
Header 组件
import React from "react";
class Headr extends React.Component {
constructor(props) {
super(props);
this.state={
username:'',
}
console.log(props)
}
handelInput=(e)=>{
this.setState({
username:e.target.value
})
console.log(this.props)
}
subumit=()=>{
let text= this.state.username
this.props.addList(text)
this.setState({
username:''
})
}
render() {
return (
<div>
<input
onChange={this.handelInput}
placeholder="请输入代办事项"
value={this.state.username}
/>
<button onClick={this.subumit}> 增加 </button> <hr />
</div>
);
}
}
export default Headr
Completed 组件
import React from "react";
class Completed extends React.Component {
constructor(props) {
super(props);
console.log(this.props.list.list);
}
onChangeChecked(val, key) {
this.props.checkboxCheckd(val, key);
}
delItem(val, key){
console.log(val,key)
this.props.del(val,key)
}
render() {
return (
<div>
<h1>已完成</h1>
<ul>
{this.props.list.list.map((val, key) => {
if (val.checked) {
return (
<li key={key}>
<input
type="checkbox"
onChange={this.onChangeChecked.bind(this, val, key)}
checked={val.checked}
/>
{val.title}
<button onClick={this.delItem.bind(this, val, key)}>删除</button>
</li>
);
}
})}
</ul>
<h1>未完成</h1>
<ul>
{this.props.list.list.map((val, key) => {
if (!val.checked) {
return (
<li key={key}>
<input
type="checkbox"
onChange={this.onChangeChecked.bind(this, val, key)}
checked={val.checked}
/>
{val.title}
<button onClick={this.delItem.bind(this, val, key)}>删除</button>
</li>
);
}
})}
</ul>
</div>
);
}
}
export default Completed;
此组件 还可再分
todoList 组件
import React from "react";
import Headr from "./Headr"
import Completed from "./Completed"
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {
username:'',
list: [
{
title: "吃饭",
checked: true
},
{
title: "下班",
checked: true
},
{
title: "洗澡",
checked: false
},
{
title: "睡觉",
checked: false
}
]
};
}
del=(val,key)=>{
console.log(key,val)
let list = this.state.list
list.splice(val,1)
this.setState({
list,
})
}
addList=(text)=>{
console.log(text)
var temp=this.state.list
console.log(temp)
temp.push({title:text,checked:false})
this.setState({
temp,
})
this.setState({
username:''
})
}
checkboxCheckd(val,key){
console.log(val.checked,key)
console.log(this.state.list)
let list =this.state.list
list[key].checked=!val.checked
this.setState({
list,
})
}
render() {
return (
<div>
<Headr addList={this.addList}/>
<Completed list={this.state} checkboxCheckd={this.checkboxCheckd.bind(this) } del={this.del} />
</div>
);
}
}
export default TodoList
注意更改数据的 函数都在父组件里 react 遵循单向数据流 数据都是 由父组件 流向子组件