组件写完记得导出
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 | 可选。向数组添加的新项目。 |