ReactDemo - todolist

(

ES6书籍推荐：ES6书籍

React中文：http://react-china.org/

React中文文档：https://react.docschina.org/

DevDocs - 开发文档网站:https://devdocs.io/

)

下面是webstorm打开看到的效果(自动建立的文件删了)

public/index.html是一个入口，index.js是这个入口的js文件

components是使用到的组件

1.index.html不用变，默认渲染root就是了，

看index.js

import React  from 'react'
import ReactDOM from 'react-dom'

import App from './components/App'

//入口
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

2.App.js

import React ,{Component} from 'react'

import Filter from "./Filter";
import List from "./List";

export default class  extends Component {

  constructor (props){
    super(props);

    // 初始化一些数据
    this.state = {
      todos: [
        {id:1 ,todo:'吃w饭'},
        {id:2 ,todo:'睡w觉'},
        {id:3 ,todo:'敲a代码'}
      ],

      // 文本框中的内容
      keyword:'',
      nextId:4
    }
  }

  // 添加todo
  addTodo =(todo)=>{
    // 先获取todos以及len，然后将新的todo添加到todos
    // 最后更新状态，不然看不到效果
    const {todos} = this.state;
    let {nextId} = this.state;
    todos.push({id:nextId,todo:todo});
    nextId += 1;//这里改变了值，下面的setState就要用花括号了，不然有报错，因为state必须是对象
    this.setState(todos);
    this.setState({nextId});
  };

  // 删除指定id的todo
  deleteTodo =(id)=>{
    let {todos} = this.state;
    todos = todos.filter( (item) => item.id!==id);
    this.setState({todos});
  };

  // 查找
  searchTodo=(keyword)=>{
    // state必须是一个对象
    this.setState({keyword});
  };

  render() {
    const {keyword} = this.state;
    const {todos} = this.state;
    let curTodos;

    // 判断是否需要查找
    if(keyword.length > 0){
      const {todos} = this.state;
      curTodos = todos.filter( item => item.todo.indexOf(keyword) > -1 );
    }else {
      curTodos = todos;
    }

    return (
      <div>
        {/* 文本输入框、添加按钮、查找按钮 */}
        <Filter addTodo={this.addTodo} searchTodo={this.searchTodo}/>
        {/* 显示列表 */}
        <List todos={curTodos} deleteTodo={this.deleteTodo}/>
      </div>
    );
  }
}

3.Filter.js

import React from 'react'
import PropTypes from 'prop-types'
//不能在'react'中导入PropTypes

export default class Filter extends React.Component {

  addTodo =()=>{
    const text = this.input.value.trim();

    //空串不让添加
    if(!text){
      return;
    }
    this.props.addTodo(text);
  };

  searchTodo =()=> {
    const text = this.input.value.trim();
    this.props.searchTodo(text);
  };

  render() {
    return (
      <div>
        {/*
          text1 => this.input3 = text2
          text1 = text2，input3就是this.input.value的input
        */}
        <input type='text' ref={text => this.input = text}/>  
        <button onClick={this.addTodo}>Add</button>  
        <button onClick={this.searchTodo}>Search</button>
      </div>
    );
  }
}

Filter.propTypes = {
  addTodo:PropTypes.func.isRequired,
  searchTodo:PropTypes.func.isRequired
};

4.List.js

import React ,{Component} from 'react'
import PropTypes from 'prop-types'

import Item from './Item'

export default class List extends Component {

  deleteTodo =(id)=>{
    // 调用父组件的deleteTodo
    this.props.deleteTodo(id);
  };

  render() {
    const {todos} = this.props;
    return (
      <div>
        <ul>
          {/*
            遍历todos，每一个todo传参给Item，让他来显示
            {todos.map((todo,key) => <li todo={todo} key={key} />)}
          */}
          { todos.map((todo, key) => <Item key={key} todo={todo} deleteTodo={this.deleteTodo} />) }
        </ul>
      </div>
    );
  }
}
List.propTypes = {
  todos:PropTypes.array.isRequired,
  deleteTodo:PropTypes.func.isRequired
};

5.Item.js

import React ,{Component} from 'react'

export default class Item extends Component {

  deleteTodo =()=>{
    const {todo} = this.props;
    this.props.deleteTodo(todo.id);
  };

  render() {
    const {todo} = this.props;
    //console.log(todo);//ok
    return (
      <div>
        {/*{todo.id},{todo.todo}*/}
        <li>{todo.id}：{todo.todo} <button onClick={this.deleteTodo}>×</button> </li>
      </div>
    );
  }
}

OK

执行一下：npm start

打包：npm run build

打包之后访问网页是空的，因为还需要服务器

执行上面的两行代码就欧克了

npm install -g serve
serve -s build

后端啥都要懂hhh