React 小案例 列表添加删除功能

所有代码

import React,{Component,Fragment} from 'react'

class TodoList extends Component{
    constructor(props){
        super(props);
        this.state = {
            list:[
                'learn react',
                'learn english',
                'learn vue'
            ],
            inputValue:''
        }
    }
    handleBtnCilck(){
        this.setState({
            list:[...this.state.list, this.state.inputValue],
            inputValue:''
        })
    }
    handleInputChange(e){
        this.setState({
            inputValue:e.target.value,
        })
    }
    handleItemClick(index){
        //console.log(index);
        const list = [...this.state.list];
        list.splice(index,1);
        this.setState({
            list:list
        })
    }
    render(){
        return(
            <Fragment>
            <input onChange={this.handleInputChange.bind(this)}
            value={this.state.inputValue}
            />
            <button onClick={this.handleBtnCilck.bind(this)} className="add">添加</button>
                <ul>
                   {
                       this.state.list.map((item,index)=>{
                           return <li className="list" key={index}>{item}
                           <span style={{marginLeft:"20px"}}
                                 onClick={this.handleItemClick.bind(this,index)}
                                 className="delete"
                           >删除</span>
                           </li>
                       })
                   }
                </ul>
            </Fragment>
        )
    }
}
export default TodoList复制代码

 

注意点:

【this指向问题】

1.标签事件绑定中，事件名前面的this，指向整个全局组件

<button onClick={this.handleBtnCilck.bind(this)} className="add">添加</button>复制代码

2.而在当前组件事件函数中this指向当前函数，所以如果函数中需要用到全局的state数据，就需要将函数中的this变成全局的this，this.handleBtnCilck.bind(this)

handleInputChange(e){
    this.setState({
        inputValue:e.target.value,
    })
}复制代码

 

【render渲染的根标签问题】

1.render下只能渲染一个根标签，div，但是外层套一层div属于冗余代码，我们可以将其替换为<Fragment>标签，同时在上方记得引入Fragment

import React,{Component,Fragment} from 'react'复制代码

2.也可将Component，同时简化此处的代码：

class TodoList extends Component{}复制代码

 

【遍历渲染的key值，不能重复】

<li className="list" key={index}>{item}>复制代码

要遍历哪个标签，就return哪个标签

 

【遍历方法】

1.list是要遍历的数组数据

 

{
    this.state.list.map((item,index)=>{
        return <li className="list" key={index}>{item}</li>
    })
}复制代码

 

【父子传值问题】

1.父组件通过给子组件标签上添加属性传参给子组件，子组件通过props接收父组件传递过来的参数；

父：

<CommentBox commentsLength={comments.length}/>复制代码

子：

<p>已有{this.props.commentsLength}条评论</p>复制代码

 

2.子给父传，是调用父组件传来的方法，将内容作为参数传出

父组件：

addComment(comment111){
  this.setState({
      comments:[...this.state.comments,comment111]
  })
}
<CommentBox onAddComment={this.addComment}/>复制代码

子组件携带参数传给父组件：

handleSubmit(event){
    this.props.onAddComment(this.textInput.value)
}复制代码

最终效果：