React的todolist案例

一、todolist案例

基于前面学习的react知识，在此基础上进行编写一个react的todolist案例。

1.1 增加与删除

新建todolist.js写入：

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

export default class Todolist extends Component {
  state = {
    arr: ['000', '111', '222']
  }
  listRef = React.createRef()

  render() {

    return (
      <div>
          <input ref={this.listRef}></input>
          <button onClick={() => {
              this.addHandle()
          }}>增加</button>
          <ul>
              {this.state.arr.map((item, index) => 
              <li key={index}>{item}
                {/* <button onClick={this.delHandle.bind(this, index)}>删除</button>   bind传参数  */}
                <button onClick={() => {this.delHandle(index)}}>删除</button>
              </li>)}
          </ul>
      </div>
    )
  }
  addHandle = () => {
    //   console.log('addHandle', this.listRef.current.value)

    // 不要直接修改状态，可能会造成不可预期的问题
    // this.state.arr.push(this.listRef.current.value)

    let newArr = [...this.state.arr]
    newArr.push(this.listRef.current.value)
    this.setState({
        arr: newArr
    })
  }

  delHandle (index) {
    console.log(index)
    let newArr = this.state.arr.slice()
    newArr.splice(index, 1)
    this.setState({
        arr: newArr
    })
  }
}

index.js修改引入：

效果：

---

1.2 优化

上述案例可以明显知道，在添加时，添加完之后，input框里面的内容不会自动清空，要自己手动清空。针对这个来优化：

// 清空输入框
    this.listRef.current.value = "";

---

1.3 条件渲染

在把列表全部删除完之后，显示一个列表为空的状态。
增加渲染代码：
方案一：

{ this.state.arr.length == 0 ? <h1>列表为空</h1> : null}

---

方案二：

{ this.state.arr.length == 0 &&  <h1>列表为空</h1>}

---

方案三：
利用css的隐藏和显示，提前写好：

在index.js中引入：

写入：

<h1 className={this.state.arr.length == 0 ? '' : 'hidden'}>列表为空</h1>

效果：

---

1.4 富文本渲染dangerouslySetInnerHTML

当在输入框中输入一些html及一些样式时，能够正确的按照代码片段显示出来。
将todolist.js中展示修改为：

{/* 富文本展示 */}
                <div dangerouslySetInnerHTML={
                    {
                        __html: item
                    }
                }></div>

效果：

效果：

在学习React的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。