React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)

写一个todoList小案例来体验一下组件的状态以及状态维护的注意点

 

import React, { Component } from 'react'
import './css/01-index.css'
export default class App extends Component {
    state = {
        tolist:[],
        inputValue:''
    }
  render() {
    return (
      <div>
        <input value={this.state.inputValue} onChange={
       
        } type="text" />
        <button onClick={
          
        }>add</button>
        {this.state.tolist.map((item,index)=>{
            return (
                <div key={index}>{item}</div>
            )
        })}
         {/* 条件渲染(动态创建/删除)
                方案一：{this.state.tolist.length === 0 ? <div>暂无代办事项</div> : null}
                方案二： {this.state.tolist.length === 0 && <div>暂无代办事项</div>}
                */}
                {/* 
                  条件渲染(隐藏/显示)
                   <div className={this.state.tolist.length ? 'hidden' : ""}>暂无代办事项</div>
                */}
                <div className={this.state.tolist.length>0 ? 'hidden' : ""}>暂无代办事项</div>
      </div>
    )
  }
 
}

先定义两个状态todolist存放代表事项，inputvalue用来控制input的value

再通过条件渲染的方式渲染缺省画面

再定义input和add按钮的事件回调用来存放和添加待办事件

import React, { Component } from 'react'
import './css/01-index.css'
export default class App extends Component {
    state = {
        tolist:[],
        inputValue:''
    }
  render() {
    return (
      <div>
        <input value={this.state.inputValue} onChange={
            this.changeHanlder
        } type="text" />
        <button onClick={
           this.addHanler
        }>add</button>
        {this.state.tolist.map((item,index)=>{
            return (
                <div key={index}>{item}</div>
            )
        })}
         {/* 条件渲染(动态创建/删除)
                方案一：{this.state.tolist.length === 0 ? <div>暂无代办事项</div> : null}
                方案二： {this.state.tolist.length === 0 && <div>暂无代办事项</div>}
                */}
                {/* 
                  条件渲染(隐藏/显示)
                   <div className={this.state.tolist.length ? 'hidden' : ""}>暂无代办事项</div>
                */}
                <div className={this.state.tolist.length>0 ? 'hidden' : ""}>暂无代办事项</div>
      </div>
    )
  }
   changeHanlder = (e)=>{
 
        this.setState({
            inputValue:e.target.value
        })
        
  }
   addHanler = ()=>{
    /* 
        注意不要直接修改状态，会导致不可预期的错误
        可以定义一个临时变量来对状态进行深拷贝，然后改变这个变量
        再通过setState方法赋给状态
    */
        if(this.state.inputValue !==''){
    const newlist = [...this.state.tolist]
    newlist.push(this.state.inputValue)
    this.setState({
        tolist:newlist,
        inputValue:''
    })
}
  }
}

这里要注意的是：

要直接修改状态，会导致不可预期的错误
可以定义一个临时变量来对状态进行深拷贝，然后改变这个变量
再通过setState方法赋给状态