初级案例 todolist

新手上路，用React 做一个 todolist 功能。

之前我们已经新建了一个react 项目，名叫todolist 。

我们先把入口文件，修改一下，把App 改成 todolist ，如下。

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(<TodoList />, document.getElementById('root'));

然后，将App.js 改名为 TodoList.js 并修改一下里面的内容，如下。

import React, { Component } from 'react';

class TodoList extends Component {
  render() {
    return (
      <div>
        {1+1}
        hello world
      </div>
    );
  }
}

export default TodoList;

然后，我们给TodoList.js 一个大概的样子，和按钮绑定事件，按JSX 语法。如下。

import React, { Component } from 'react';

class TodoList extends Component {

  handleBtnClick () {
    alert("handleBtnClick");
  }
  
  render() {
    return (
      <div>
        <div>
          <input />
          <button onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>
          <li>learn react</li>
          <li>learn node</li>
        </ul>
      </div>
    );
  }
}

export default TodoList;

然后，我们使用组件的变量保存数据。如下。

import React, {
  Component
} from 'react';

class TodoList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: [
        'learn react',
        'learn node'
      ]

    }
  }
  handleBtnClick() {
    alert("handleBtnClick");
  }

  render() {
    return (
      <div>
        <div>
          <input />
          <button onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>
          {
            this.state.list.map((item) => {
              return <li>{item}</li>
            })
          }
        </ul>
      </div>
    );
  }
}

export default TodoList;

好的，然后，下面，实现点击 add 增加一个helloworld，如下。

import React, {
  Component
} from 'react';

class TodoList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: [
        'learn react',
        'learn node'
      ]

    }
  }
  handleBtnClick() {
    this.setState({
      list: [...this.state.list, 'hello world']
    })
  }

  render() {
    return (
      <div>
        <div>
          <input />
          <button onClick={this.handleBtnClick.bind(this)}>add</button>
        </div>
        <ul>
          {
            this.state.list.map((item,index) => {
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>
    );
  }
}

export default TodoList;

下面是，点击add 按钮，会将input 中内容增加到list 中，并情况input 。

import React, {
  Component
} from 'react';

class TodoList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: [],
      inputValue: ''
    }
  }
  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }
  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }
  render() {
    return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
          <button onClick={this.handleBtnClick.bind(this)}>add</button>
        </div>
        <ul>
          {
            this.state.list.map((item,index) => {
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>
    );
  }
}

export default TodoList;

下面，我们来做删除list 的功能，如下。

import React, {
  Component
} from 'react';

class TodoList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: [],
      inputValue: ''
    }
  }
  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }
  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }
  handleItemClick(index) {
    const list = [...this.state.list];
    list.splice(index, 1)
    this.setState({
      list: list
    })
  }
  render() {
    return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
          <button onClick={this.handleBtnClick.bind(this)}>add</button>
        </div>
        <ul>
          {
            this.state.list.map((item,index) => {
              return <li key={index} onClick={this.handleItemClick.bind(this,index)}>{item}</li>
            })
          }
        </ul>
      </div>
    );
  }
}

export default TodoList;

好啦！