React之TodoLIst(涉及父子组件传值)

1：安装react官方脚手架

注意：需要在计算机上安装Node> = 6和npm> = 5.2

npx create-react-app my-app

cd my-app

npm start

2：调整目录结构

3：index.js(程序入口文件)

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

import TodoList from './TodoList';


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

4：TodoList.js

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

import TodoItem from './TodoItem';


class TodoList extends Component {
  constructor(props){
    super(props);
    this.state={
      inputValue:'',
      list:[],
    }
  }
  render() {
    return (
        <Fragment>{/*一个占位符，只是为了包裹*/}
            <div>
              <input
                value={this.state.inputValue}
                onChange={this.handleInputChange}//this指的是TodoList
              />
              <button onClick={this.handleBtnClick}>保存</button>
            </div>
            <ul>
                {this.getToDdoItem()}{/*函数加上括号，直接调用*/}
            </ul>
        </Fragment>

    );
  }
  //用map循环遍历list
  getToDdoItem=()=>{
    return this.state.list.map((item,index)=>{
        return (
            <TodoItem
                key={item}
                content={item}
                index={index}//传递给子组件的属性
                deleteItem={this.handleItemDelete}//传递给字组件的函数，
            />
        )
    })
  };
  //使用箭头函数不用再bind(this)
  handleInputChange=(e)=>{
    //旧的setState写法
    // this.setState({
    //     inputValue: e.target.value
    //     // 获取输入框里面的值
    // });

    // 新的setState写法1
    const value=e.target.value;// 获取输入框里面的值
    this.setState(()=>({
            inputValue:value
        }
    ))


  };
  // 点击提交按钮，在原来的数组基础上，添加输入框里的值
  handleBtnClick=()=>{
    //旧的setState写法
    this.setState({
        list:[...this.state.list,this.state.inputValue],
        inputValue:"",
    })
  };
  //点击之后根据索引删除
  handleItemDelete=(index)=>{
      // 新的setState写法2
      this.setState((prevState)=>{//prevState=this.state
          const list=[...prevState.list];
          list.splice(index,1);
          return {
            list,list
          }
      })

  }
}


export default TodoList;

5：TodoItem.js

import   React,{Component} from   'react';


class TodoItem extends Component{

    render(){
        const {content}=this.props;//解构出父组件传来的属性
        return(
            <div onClick={this.handleClick}>
                {content}
            </div>
        )
    }
    //这个函数利用父组件的删除方法
    handleClick=()=>{
        const {deleteItem ,index}=this.props;
        deleteItem(index);//调用父组件传来的属性和函数进行点击删除
    }
}
export default TodoItem;

6:效果图