React点击添加/删除节点，prevState的使用

最新推荐文章于 2024-03-29 09:54:13 发布

原创最新推荐文章于 2024-03-29 09:54:13 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #es6

es6 同时被 2 个专栏收录

14 篇文章

订阅专栏

react

12 篇文章

订阅专栏

本文介绍了一个使用React构建的待办事项应用，演示了如何通过输入框接收用户输入，将输入的内容添加到待办事项列表，并提供了删除已添加项目的功能。文章详细展示了组件状态管理和事件处理的方法。

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      inputValue:'',
      list:[]
    }
  }
  render() {
    return (
      <div>
         <input 
            type='text' 
            value={this.state.inputValue}
            onChange={this.getVal.bind(this)}
         />

         <button 
          onClick={this.addItem.bind(this)}
         >添加</button>

         {
            this.state.list.map((item,index)=>{
                return (
                    <div 
                      key={index}
                      onClick={this.delItem.bind(this,index)}
                    >{item}</div>
                )
            })
         }

      </div>
    );
  }
  getVal(e){
    //e是事件对象
    let val = e.target.value;
    this.setState(()=>{
      return {
        inputValue:val
      }
    })
  }
  addItem(){
     /*
     this.setState(()=>{
        return {
          list:[...this.state.list,this.state.inputValue],
          //...this.state.list表示展开this.state.list   (es6语法)
          //如果不理解可以console.log打印看看
          inputValue:''
        }
     })*/
     
     this.setState((prevState)=>{
       //prevState表示上一次的状态
       //如果不理解可以console.log打印看看
        return {
          list:[...prevState.list,prevState.inputValue],
          inputValue:''
        }
     })

  }
  delItem(index){

    let list = this.state.list;
    list.splice(index,1);

    this.setState(()=>{
      return {
        list:list
      }
    })
    
  }

}
export default App;