react--todolist

import React, { createRef, Fragment } from "react";

export default class Todolist extends React.Component {
  constructor() {
    super();
    this.state = {
      obj: [
        { title: "吃饭" },
        { title: "睡觉" },
        { title: "打豆豆" },
        { title: "学习" },
        { title: "打游戏" },
      ],
    };
    this.inputval = createRef();
  }
  fun = () => {
    return this.state.obj.map((v, i) => {
      return (
        <li key={i}>
          <span>{v.title}</span>----
          <button onClick={this.del.bind(this, i)}>删除</button>-----
          <button
            onClick={() => {
              this.updata(i);
            }}
          >
            编辑
          </button>
        </li>
      );
    });
  };
  add = () => {
    if (this.inputval.current.value !== "") {
      let newarr = [];
      newarr = [...this.state.obj, { title: this.inputval.current.value }];
      this.setState({
        obj: newarr,
      });
      this.inputval.current.value = "";
    }
  };
  del = (i) => {
    if (window.confirm("确认要删除吗？")) {
      let newarr = [];
      newarr = this.state.obj;
      newarr.splice(i, 1);
      this.setState({
        obj: newarr,
      });
    }
  };
  updata = (i) => {
    let newword = window.prompt("请输入编辑后的内容");
    if (newword) {
      let newarr = [];
      newarr = this.state.obj;
      newarr[i].title = newword;
      this.setState({
        obj: newarr,
      });
    }
  };
  clear = () => {
    this.setState({
      obj: [],
    });
  };

  render() {
    return (
      <Fragment>
        {this.state.obj.length === 0 ? (
          <h3>暂无数据</h3>
        ) : (
          <ul>{this.fun()}</ul>
        )}

        <input type="text" ref={this.inputval} />
        <button onClick={this.add}>添加</button>
        <button onClick={this.clear}>清空</button>
      </Fragment>
    );
  }
}