React.js实现TodoList

这篇文章，俺将跟大家一起实现TodoList，实现代码如下：

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

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputVal: "",
      list: [],
    };
  }
  render() {
    return (
      <Fragment>
        <div>
          <input
            type="text"
            value={this.state.inputVal}
            onChange={this.handleInputChange.bind(this)}
          />
          <button onClick={this.handleBtnClick.bind(this)}>提交</button>
        </div>
        <div className="todo-list_wrapper">
          <ul>
            {this.state.list.map((self, index) => (
              <li key={index} onClick={this.handleItemClick.bind(this, index)}>
                {self}
              </li>
            ))}
          </ul>
        </div>
      </Fragment>
    );
  }
  handleBtnClick() {
    const { list, inputVal } = this.state;
    this.setState({
      list: [...list, inputVal],
      inputVal: "",
    });
  }
  handleInputChange(e) {
    this.setState({
      inputVal: e.target.value,
    });
  }
  handleItemClick(e, index) {
    let { list } = this.state;
    list.splice(index, 1);
    this.setState({
      list
    });
  }
}

export default TodoList;

React.js改变state

在React.js中我们改变state，可以使用setState，注意直接修改state，没有任何作用。

this.state.inputVal = ""; //没有任何作用
this.setState({
  inputVal: ""
}); //修改的正确方法

React.js绑定事件

React.js中绑定事件，我们可以使用原生的小驼峰模式，例如onChange、onClick，还需要设置上下文this，实现案例代码如下：

<button onClick={this.handleBtnClick.bind(this)}>提交</button>
handleBtnClick() {
    const { list, inputVal } = this.state;
    this.setState({
      list: [...list, inputVal],
      inputVal: "",
    });
  }

React.js循环显示数据

在React.js中我们循环显示数组数据，可以使用map方法，实现案例代码如下：

          <ul>
            {this.state.list.map((self, index) => (
              <li key={index} onClick={this.handleItemClick.bind(this, index)}>
                {self}
              </li>
            ))}
          </ul>