react
关注
分享
扫一扫
酷jjs
追求卓越，激流勇进！
展开
-
react中useReducer的基本使用
import React, { useContext, useReducer } from 'react';const reducer = (preState: any, action: any) => { const newState = { ...preState }; switch (action.type) { case 'change-a': newState.a = newState.a + action.value; return newSt.原创 2022-03-07 16:40:41 · 410 阅读 · 0 评论 -
react antd 自定义倒计时按钮组件
父组件：import React, { useState, useEffect, useRef } from 'react';import {Button} from 'antd';// 控制按钮执行倒计时事件const [toStart, settoStart] = useState(false);//组件使用<Timebutton name={'命中详情'} num={4} onClick={() => { console.log('3333');原创 2022-03-04 14:37:59 · 1100 阅读 · 0 评论 -
react-ant-design 日期时间选择器
功能：默认选中当天，选中范围三个月内，选中最长天数7天具体方法：（自定义ahooks）const useTime = () => { const format = "YYYY-MM-DD HH:mm:ss"; const [dates, setDates] = useState([]); const [hackValue, setHackValue] = useState(); // 默认当天 const [timevalue, settimeValue] = use原创 2022-02-11 13:54:35 · 2510 阅读 · 0 评论 -
react组件---组件通信方式总结
<div>react组件---组件通信方式总结</div><div>组件间的关系：</div><ul> <li>父子组件</li> <li>兄弟组件（非嵌套组件）</li> <li>祖孙组件（跨级组件）</li></ul><div>几种通信方式：</div><ul> <li>1.props-.原创 2021-11-04 20:41:07 · 147 阅读 · 0 评论 -
react demo14 (组件生命周期)
react组件的生命周期<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react.js"></script> <script src="./build/react-dom.js"></script原创 2017-05-07 00:09:06 · 445 阅读 · 0 评论 -
react demo12 (获取组件属性状态this.state)
表单监控，this.state实战练习需求：定义一个组件，将用户在输入框内输入的内容进行实时显示分析：组件与用户交换时，存在状态的变化，即输入框的值<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/rea原创 2017-05-06 22:18:17 · 1576 阅读 · 0 评论 -
react demo11 (添加组件事件处理)
需求：创建一个CheckButton的组件，包含一个checkbox类型<input> 复选框在选中和未选中两种状态下会显示不同的文字，即：根据状态渲染学习：通过this.state读取组件的属性状态值<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</titl原创 2017-05-06 21:37:52 · 1177 阅读 · 0 评论 -
react demo13 (根据组件属性状态this.state实现表单实时监控)
表单监控，this.state实战练习需求：定义一个组件，将用户在输入框内输入的内容进行实时显示分析：组件与用户交换时，存在状态的变化，即输入框的值<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/rea原创 2017-05-06 22:25:02 · 1447 阅读 · 0 评论 -
react demo10 (设置组件属性的默认值getDefaultProps)
需求：定义一个组件，设置title属性默认值学习：组件属性默认值getDefaultProps方法<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react.js"></script> <scri原创 2017-05-06 17:51:02 · 5859 阅读 · 1 评论 -
react demo9 (组件属性验证propTypes)
需求：定义一个组件，设置title属性必须是字符串 学习：组件属性验证propTypes<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react.js"></script> <script sr原创 2017-05-06 17:39:38 · 297 阅读 · 0 评论 -
react demo8 (设置组件自身属性this.props.children)
需求：定义一个列表组件，列表项中显示的内容，以及列表项的数量都由外部决定 学习：设置组件自身属性this.props.children<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react.js"><原创 2017-05-06 17:14:58 · 1859 阅读 · 0 评论 -
react demo7 (设置组件自身属性...this.props)
需求：定义一个组件，设置组件自身属性…this.props 学习：设置组件自身属性…this.props<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react.js"></script> <s原创 2017-05-06 16:53:02 · 577 阅读 · 0 评论 -
react demo6 (设置组件自身属性this.props)
需求：定义一个复合组件，设置组件自身属性this.props 学习：组件自身属性this.props<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react.js"></script> <scr原创 2017-05-06 16:50:52 · 813 阅读 · 0 评论 -
react demo5 (自定义react复合组件)
React dome 5 需求：定义一个复合组件 复合组件：也称为组合组件，创建多个组件合成一个组件 注意：命名必须以大写字母开头，驼峰命名法<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react原创 2017-05-06 16:48:47 · 687 阅读 · 0 评论 -
react demo4 (设置组件样式)
react dome 4 需求：定义一个组件，同时使用3中设置组件样式的方式 学习：设置组件的样式<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react.js"></script> <scr原创 2017-05-06 12:44:34 · 404 阅读 · 0 评论 -
react demo3 (自定义react组件)
React dome 3 创建一个组件类 需求：渲染一行标题，显示“Hello, world!”<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react.js"></script> <scr原创 2017-05-06 12:08:17 · 419 阅读 · 0 评论 -
react demo2 (JSX入门)
JSX入门 需求：渲染一行标题，显示“Hello, world!”<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react.js"></script> <script src="./build原创 2017-05-06 11:42:19 · 440 阅读 · 0 评论 -
react demo1 (react内容渲染)
react dome 1 需求：渲染一行标题，显示“Hello, world!”<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react.js"></script> <script src=".原创 2017-05-06 11:12:31 · 412 阅读 · 0 评论 -
react模板
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react模板</title> <!--react.js是react的核心库--> <script src="./build/react.js"></script> <!--react-dom.js的作用是提供与dom相关原创 2017-05-06 10:55:42 · 2708 阅读 · 0 评论