react 基础 todolist增删请求数据渲染列表/抽离子组件

秒速五厘米 2024-04-19 12:00 18阅读 0赞

![2019091808495188.png][]

### 父组件Xiaojiejie.js ###

// todolist  增删  使用axios 使用easymock
    import axios from 'axios'
    import React,{Component,Fragment } from 'react'
    import XiaojijieItem from './XiaojiejieItem'  //子组件
    //Fragment组件的作用 代替最外层的div 在不需要div时代替div
    
    class Xiaojiejie extends Component{
     //初始化数据
    constructor(props){
        super(props) //调用父类的构造函数，固定写法
        this.state={
            inputValue:'' , // input中的值
            list:[]    //服务列表
        }   
    }
        render(){
            return  (
                <Fragment>
                   <div>
                    {/* label绑定 htmlFor="sss" input id='sss' 将label和input关联起来*/}
                   <label htmlFor="sss">加入服务：</label>
                      <input id='sss' value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>
                        <button  onClick={this.addlist.bind(this)}> 增加服务 </button>
                    </div>
                   <ul>
                       {/* js语法写在大括号里即可  循环*/}
                        {
                        this.state.list.map((item,index)=>{
                            return  (
                               <div>
                                   {/* 父组件给子组件传值和方法 */}
                                  <XiaojijieItem 
                                  key={index+item} 
                                  index={index}  
                                  content={item}
                                  deleteItem={this.deleteItem.bind(this)}
                                  />  
                               </div>
                            )
                        })
                        }
                   </ul> 
                </Fragment>
            )
        }
        componentDidMount(){
            //已经挂载 获取list数据 将组建中的list赋给请求来的数据
            axios.get('https://www.easy-mock.com/mock/5d63d7ca5774121e1a634378/demo1/demo1')
                .then((res)=>
                {
                    console.log(res.data.data)
                    this.setState({
                        list:res.data.data
                    })
                })
                .catch((error)=>{
                    console.log(error)
                })
        }
        inputChange(e){
            console.log(e.target.value);
            //用bind获取事件中的this 
            this.setState({
                inputValue:e.target.value  //双向数据绑定
            })
        }
        //添加一项
        addlist(){
            this.setState({
                list:[...this.state.list,this.state.inputValue],  //es6 语法 增加list菜单项  先列出数组中每一项 然后加入新的项
                inputValue:""  //之后将表单清空
            })
        }
        //删除每项
        deleteItem(index){
            let list = this.state.list
            list.splice(index,1)
            this.setState({
                list:list
            })
            //React是禁止直接操作state的
            //所以 this.state.list.splice(index,1) 不要这样操作
            //先给list赋给一个变量，操作变量后，再将变量赋给state中的list
        }
    }
    
    export default Xiaojiejie

### 将list部分抽离为子组件 XiaojijieItem.js： ###

import React, { Component } from 'react';  //imrc
    import PropTypes from 'prop-types' //数据类型校验
    
    
    class XiaojiejieItem extends Component {   //cc
        constructor(props){
            super(props)
            this.handleClick= this.handleClick.bind(this)  //函数绑定this    
        }
        shouldComponentUpdate(nextProps,nextState){  //组件改变前执行  nextProps之前的参数 nextState改变之后的
            if(nextProps.content!==this.props.content){  //如果数据变化了（增删）就渲染  如果没变化就不渲染
                return true;  
            }else{
                return false;
            }
        }
        render() {
            console.log("子组件渲染") 
            return ( 
                <div>
                    {/* 接收父组件的传值 */}
                    <li onClick={this.handleClick} >{this.props.content}</li>
                </div>
            );
        }
        handleClick(){
            // 接收父组件的方法deleteItem 和参数index
            this.props.deleteItem(this.props.index)
        }
    }
     
        //数据类型校验
        XiaojiejieItem.propTypes={
            content:PropTypes.string,
            deleteItem:PropTypes.func,
            index:PropTypes.number
        }
    
    export default XiaojiejieItem;

[2019091808495188.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/484dd56e251b444f968be880453f6937.png