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

刺骨的言语ヽ痛彻心扉 2022-05-21 11:57 240阅读 0赞

# 1：安装react官方脚手架 #

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

npx create-react-app my-app

cd my-app

npm start

# 2：调整目录结构    #

![70][]

# 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:效果图 #

![70 1][]

[70]: /images/20220521/5fd9bc2d73d2480e827d3ca5efda12b0.png
[70 1]: /images/20220521/977ef335e1f34c1bb49c08ba891977c6.png