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

向右看齐 2023-03-04 10:28 1阅读 0赞

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;