后端程序员入门react笔记(四)-综合运用,写一个小demo

样式模块化

有时候我们会遇到这样的问题,有两个css对一个class声明了样式,这样的话后引入的css会覆盖前面的css样式,导致样式冲突,那么我们怎么解决这种问题呢,我们可以使用样式的模块化,我们起名一个index.module.css和一个content.module.css

  • 我们在代码中这样使用
js 复制代码
import React from "react";
import index from "./css/index.module.css";
import content from "./css/content.module.css";

class Hello extends React.Component {
    render() {
        console.log("i am render")
        return (
            <ul>
                <h1 className={index.title}>i am index.css</h1>
                <h1 className={content.title}>i am content.css</h1>
            </ul>
        )
    }
}
//导出组件
export default Hello;

Webstorm中的快捷键

  • rcc+tab键:用ES6模块系统创建一个React组件类
js 复制代码
import React, {Component} from 'react';

class Hello extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default Hello;
  • rccp+tab键:创建一个带有PropTypes和ES6模块系统的React组件类
javascript 复制代码
import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Hello extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

Hello.propTypes = {};

export default Hello;
  • rcfc+tab键:创建一个带有PropTypes和所有生命周期方法以及ES6模块系统的React组件类
  • rcjc+tab键:用ES6模块系统创建一个React组件类(无导出)
  • rdp+tab键:快速生成defaultProps
  • rpc+tab键:用PropTypes和ES6 moudle系统创建一个React纯组件类
  • rrc+tab键:创建一个连接到redux的React组件类
  • rrdc+tab键:创建一个通过dispatch连接到redux的React组件类
  • rsc+tab键:创建没有PropTypes和ES6模块系统的无状态React组件
  • rscp+tab键:创建有PropTypes和ES6模块系统的无状态React组件
  • rsf+tab键:以命名函数的形式创建无状态的React组件,不使用PropTypes
  • rsfp+tab键:使用PropTypes将无状态的React组件作为命名函数创建
  • rsi+tab键:创建无状态的React组件,不使用PropTypes和ES6模块系统,但使用隐式返回和道具
  • rwwd+tab键:在没有导入的情况下,在ES6模块系统中创建一个有构造函数、空状态、proptypes和导出的React组件类。(主要用于React时,proptype由webpack提供插件提供)

组件化编码

我们通过前面应该也能认识到,我们写react,包括npm运行react,其实都是从index.js入口文件开始,那么index.js的格式至关重要

javascript 复制代码
//引入核心库
import React from 'react';
//引入dom库
import ReactDOM from 'react-dom';
//引入组件
import Hello from './components/Hello';
ReactDOM.render(<Hello />,document.getElementById('root'))

拆分组件的原则

  • 单一职责原则:每个组件只负责一项功能,这样可以使组件的代码更加简洁易读,并且方便维护和重用。

  • 可复用性:每个组件都应该尽量独立,以便在其他地方重复使用。

  • 组件之间的耦合度:组件之间应该尽量避免耦合,这样可以使得组件的代码更加灵活,便于维护和修改。

  • 让组件尽可能小:尽可能使组件的代码行数少,这样可以使代码更易读,并且方便维护。

  • 可读性:组件的代码应该有良好的结构,并且有适当的注释,便于阅读和理解。

案列 TodoList

页面渲染

我先把一个没有任何功能的页面渲染出来,给一些初始数据

  • 我们在入口文件中,分别声明 引入的核心文件,dom库,和组件
javascript 复制代码
//引入核心库
import React from 'react';
//引入dom库
import ReactDOM from 'react-dom';
//引入组件
import App from "./App";
ReactDOM.render(<App />,document.getElementById('root'))
  • 在App组件初始化一些数据并返回页面结构,并将初始化数据通过props传给list
javascript 复制代码
import React, {Component} from 'react';
import "./App.css"
import Header from "./components/Header/Header"
import Footer from "./components/Footer/Footer"
import List from "./components/List/List"
class App extends Component {
    //初始状态
    state={
        todos:[
            {id:1,text:"吃饭",done:false}
            ,{id:2,text:"睡觉",done:false}
            ,{id:3,text:"打豆豆",done:false}
            ,{id:4,text:"看动画",done:false}
        ]
    }
    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    {/*引入header组件*/}
                    <Header />
                    {/*引入list组件*/}
                    <List data={this.state.todos} />
                    {/*引入Footer组件*/}
                    <Footer />
                </div>
                
            </div>
        );
    }
}

export default App;
  • List.jsx
javascript 复制代码
import React, {Component} from 'react';
import Item from "../Item/Item";
import "./List.css"
class List extends Component {
    //限制属性类型
    render() {
        const todos = this.props.data;
        return (
            <ul className="todo-main">
                {todos.map((todo, index) => {
                    // 将todo对象作为props传给Item组件  ...默认和对象同名
                    return <Item key={todo.id} {...todo}></Item>;
                })}
            </ul>
        );
    }
}

export default List;
  • Item.jsx
javascript 复制代码
import React, {Component} from 'react';
import "./Item.css"

class Item extends Component {
    render() {
        const {id,text,done}=this.props
        return (
            <li style={{backgroundColor: 'white'}}>
                <label >
                    <input type="checkbox"/>
                    <span>{text}</span>
                </label>
                <button className="btn btn-danger" style={{display:'none'}}>删除</button>
            </li>
        );
    }
}
export default Item;
  • Header.jsx
javascript 复制代码
import React, {Component} from 'react';

class Header extends Component {
    render() {
        return (
            <div className="todo-header">
                <input type="text" placeholder="请输入你的任务名称,按回车键确认"/>
            </div>
        );
    }
}
export default Header;
  • Footer.jsx
javascript 复制代码
import React, {Component} from 'react';

class Footer extends Component {
    render() {
        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox"/>
                    <span>
                        <span>已经完成2/全部5</span>
                    </span>
                </label>
                <button className="btn btn-danger">清除已完成任务</button>
            </div>
        );
    }
}

export default Footer;
  • 最终样式如下

功能实现

鼠标悬浮

  • 首先我们来实现第一个功能,从简单功能入手,鼠标悬浮,列表背景色变色,并展示删除按钮,触发事件是onMouseEnter,鼠标离开恢复原状,触发事件是onMouseLeave,展示是否完成的状态,我们开始编写
javascript 复制代码
class Item extends Component {

    //定义状态
    state={mouse:false}
               //接收参数
    handleMouse=(flag)=>{
       return ()=>{
           this.setState({
               mouse:flag
           })
       }
    }
    render() {
        const {id,text,done}=this.props
        const flag=this.state.mouse
        return (                                                                  //传入参数
            <li style={{backgroundColor: flag?'#ddd':'white'}} onMouseEnter={this.handleMouse(true)}
            onMouseLeave={this.handleMouse(false)}>
                <label >
                    <input type="checkbox" checked={done}/>
                    <span>{text}</span>
                </label>
                <button className="btn btn-danger" style={{display:flag?'block':'none'}}>删除</button>
            </li>
        );
    }
}

勾选和删除

  • 实现勾选和删除功能,当点击选中按钮的时候,触发的操作是onChange,删除按钮的触发事件是onClick,我们来实现一下,因为我们操作的数据来源于App.jsx的state,为了方便操作数据,我们将方法写在App.jsx里面,然后通过props传递给组件
javascript 复制代码
    updateTodo=(id,done)=>{
        const todos=this.state.todos
        //遍历找到对应的todo,创建一个新的数组对象
        const newTodos=todos.map((todo)=>{
            if (todo.id===id){//改变状态
                return {...todo,done:done}
            }else{
                return todo
            }
        })
        this.setState({todos:newTodos})
    }

    deleteTodo=(id)=>{
        const todos=this.state.todos
        const newTodos=todos.filter((todo)=>{
           return todo.id !==id
        })
        this.setState({todos:newTodos})
    }
  • Item.jsx
javascript 复制代码
    handelChange=(id)=>{
        return (e)=>{
            //根据id和checked状态更新数据
            this.props.updateTodo(id,e.target.checked)
        }
    }
    del=(id)=>{
        return ()=>{
            this.props.deleteTodo(id)
        }
    }
    render() {
        const {id,text,done}=this.props
        const flag=this.state.mouse
        return (                                                                  //传入参数
            <li style={{backgroundColor: flag?'#ddd':'white'}} onMouseEnter={this.handelMouse(true)}
            onMouseLeave={this.handelMouse(false)}>
                <label >
                    <input type="checkbox" checked={done}  onChange={this.handelChange(id)}/>
                    <span>{text}</span>
                </label>
                <button className="btn btn-danger" onClick={this.del(id)} style={{display:flag?'block':'none'}}>删除</button>
            </li>
        );
    }

添加

  • 接下来我们再实现一个添加todo的功能,触发事件就是Onkeyup
    App.js
javascript 复制代码
    addTodo=(todo)=>{
        const todos=this.state.todos
        const newTodos=[...todos,todo]
        console.log(newTodos);
        this.setState({todos:newTodos})
    }

header.jsx

javascript 复制代码
    addTodo = (e) => {
        // console.log(e);
        const {keyCode, target} = e
        if (keyCode === 13) {
            const todo = {
                id: nanoid(),
                text: target.value,
                done: false
            }
            // console.log(todo);
            this.props.addTodo(todo);
            target.value = '';
        }
    }

全选和一键清除

  • app.js
javascript 复制代码
    checkAll=(bool)=>{//全选或者取消全选
        const todos=this.state.todos
        const newTodos=todos.map((todo)=>{
            return {...todo,done:bool}
        })
        this.setState({todos:newTodos})
    }

    delAll=()=>{
        const todos=this.state.todos
        const newTodos=todos.filter((todo)=>{
            return !todo.done
        })
        this.setState({todos:newTodos})
    }
  • footer.jsx
javascript 复制代码
class Footer extends Component {
    state = {
        checked: false
    };

    //如果是状态false 点击后全选中
    checkAll = () => {
        const  checked=this.state.checked;
        this.props.checkAll(!checked);
        this.setState({
            checked: !this.state.checked
        });
    };
    delAll = () => {
        this.props.delAll();
    };

    render() {
        const {todos} = this.props;
        const total=todos.length

        const doneCount=todos.reduce((prev,cur)=>{
            return prev+(cur.done?1:0);
        },0)

        return (
            <div className="todo-footer">
                <label>
                    <input onChange={this.checkAll} checked={this.state.checked} type="checkbox"/>
                    <span>
                        <span>已经完成{doneCount}/全部{total}</span>
                    </span>
                </label>
                <button className="btn btn-danger" onClick={this.delAll}>清除已完成任务</button>
            </div>
        );
    }
}

react的事件监听大全

react所有事件监听

相关推荐
程序员爱技术3 分钟前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
龙鸣丿1 小时前
Linux基础学习笔记
linux·笔记·学习
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
Nu11PointerException3 小时前
JAVA笔记 | ResponseBodyEmitter等异步流式接口快速学习
笔记·学习
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
亦枫Leonlew5 小时前
三维测量与建模笔记 - 3.3 张正友标定法
笔记·相机标定·三维重建·张正友标定法