react视频笔记2

组件写完记得导出

export default TodoItem;

在别的组件里引入TodoItem组件

import TodoItem from './TodoItem';

在return中就可以取代之前那一串JSX <div>的代码

return(
<TodoItem />)
//如果有多个东西则用一个<div>包裹起来

---

TodoItem组件文件中：

要进行灵活的内容传递

即【父组件向子组件传递数据】

//TodoList中
return(
<div>
  <TodoItem content={item}/>

//TodoItem中
render(){
return <div>{this.props.content}</div> 
}

【子调用父组件方法修改父组件】

constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);//绑定方法二 更好 节约性能
}

render(){
return (//绑定方法一：
<div onClick={this.handleClick.bind(this)}>//如果只是一个函数，this会指向不明，所以需要绑定
   {this.props.content}
</div>)
}
          

)

handleClick(){

}

//TodoList中我们还需要传给子组件index值
<ul>
{
this.state.list.map((item,index)=>{
return(
<div>
<TodoItem index={index} content={item} />
</div>
)

想要调用父组件方法需要将父组件方法传递给子组件

return(
<div>
<TodoItem
handleID={this.handleItemDelete}
/>
</div>

//TodoItem.js中

handleClick(){
this.props.handleID(this.props.index)
}

但是报错了

原因是这个this指向的不是父组件（方法是父组件的方法）

解决方法：

<ul>
{
this.state.list.map((item,index)=>{
return (
<div>
<TodoItem
content={item}
index={index}
handleID={this.handleItemDelete.bind(this)}//绑定完毕~
/>
</div>

---

优化：

this.props.content=const content ={ this. props}; 以后用content直接代替这一串

onchange={this.handleInputChange.bind(this) //直接写在属性里影响性能

//修改

//绑定的统一都放在contructor下面
this.handleInputChange = this.handleInputChange.bind(this); 替换掉原来的 放在constructor下面

把画界面中的逻辑相关代码专门弄到新的函数里

getTodoItem(){
return this.state.list.map((item,index)=>{
return(
<div>
<TodoItem 
    index={index} 
    content={item}
    deleteItem={this.handleItemDelete} />
</div>
)
})
}

 在之前的位置

<ul>
 {this.getTodoItem()}
</ul>

//旧版写法：

this.setState({
inputValue:e.target.value
})

//新版写法：
this.setState (() => ({
inputValue: e.target.value
}))
}
//无奈报错
//解决：在其中加入
const value=e.target.value ; 

---

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组。

语法

arrayObject.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

---