react
土匪丁的窝子
耍不好双截棍的摄影师不是好的程序猿٩( ö̆ ) و
展开
-
使用hooks写一个监听窗口变化的钩子
使用hooks写一个监听窗口变化的钩子原创 2022-02-11 00:10:26 · 988 阅读 · 0 评论 -
有趣的contentEditable属性,实现div可编辑
当需求需要在文本输入中加入一些样式,并按删除键遇到某些样式的为多个文字整体删除,使用textArea是无法实现的,textArea中没有办法写单独样式,或者加入其他标签和组件。这时候就需要使用到contentEditable属性,将div或者一些其他标签可编辑。这样便可以简单实现一个可编辑的div,需要作为整体补课编辑的子元素contentEditable设置为false便可以实现回车之后一整个删除,但是此时控制地台会报一个警告,如下图需要加上suppressContentEditabl原创 2021-04-06 23:27:53 · 2210 阅读 · 0 评论 -
react中添加监听事件 阻止事件冒泡 点击空白隐藏元素
简单写一个点击按钮显示元素,点击元素外的区域元素隐藏的demo先定义一个事件,负责隐藏元素const hidden = () => { setStatus(false)}在uesEffect中添加监听和清除监听useEffect(() => { document.addEventListener('click', hidden) return () => { document.removeEventListene.原创 2021-03-22 22:52:56 · 1198 阅读 · 0 评论 -
antd Table表格点击行选中前面的选择框
antd的官网有个例子推荐,https://codesandbox.io/s/000vqw38rl放上onRow的用法原理就是点击行的时候将所点击行的内容的key设置到selectedRowKeys中,和rowSelection中onChange的相同,只不过一个是点击checkbox/radio,一个是点击行完整多选的情况:export default class App extends Component { state = { selectedRowK原创 2021-03-21 00:49:53 · 2594 阅读 · 2 评论 -
react hooks中使用setInterval
hooks中直接使用clearInterval()是无法清除定时器的,需要使用useReflet int = useRef()创建定时器int.current = setInterval(() => { // 这里写业务}, 200);清除定时器clearInterval(int.current)需要注意的是假如每次增加1,setNum(num+1)是无法生效的,要使用回调setNum(pre => { return pre + 1;.原创 2021-03-14 01:55:11 · 1311 阅读 · 2 评论 -
antd表格默认选中行(单选或多选都可)
先放上官网文档实现默认选中行主要处理rowSelection,onChange和selectedRowKeys是关键。onChange用于点击选项时候的回调,selectedRowKeys表示选中的行的key。那么可以用这个思路默认设置selectedRowKeys的值,onChange事件触发的时候再改变selectedRowKeys。这里默认单选选中第一行完整代码如下class TestTable extends Component { constructor(原创 2021-03-13 02:05:34 · 8099 阅读 · 8 评论 -
useReducer和useContext组合案例
先看实现效果,点击按钮文字颜色分别变成蓝色和红色新建了三个文件,color.jsx负责业务逻辑,main.jsx负责包裹共享状态的组件,page.jsx负责UI展示page.jsx:先写静态的页面import React from 'react'import { Button } from "antd";function Page() { return ( <> <h1 style={{ color: '#888原创 2021-02-26 18:00:21 · 281 阅读 · 0 评论 -
useReducer简单使用
在 hooks 中提供了的 useReducer 功能,提供类似 Redux 的功能。useReducer接收一个 reducer 函数作为参数,reducer 接收两个参数state 和 action 。count 是返回状态中的值,dispatch 派发事件来更新 state 。useReducer的第二个参数将count默认值设为0const [count, dispatch] = useReducer((state, action) => { // 这里写逻辑}, 0).原创 2021-02-26 15:50:21 · 468 阅读 · 0 评论 -
useContext简单使用
如果需要在组件之间共享状态,可以使用useContext()。先引入createContext并创建一个Contextconst ContContext = createContext()需要共享状态的组件使用.Provider包裹,需要共享的数据放在value中<ContContext.Provider value={count}> <TestCom /></ContContext.Provider>完整代码im...原创 2021-02-23 00:18:03 · 771 阅读 · 0 评论 -
useEffect第二个参数
1、当useEffect没有第二个参数时const [count, setCount] = useState(0)useEffect(() => { console.log("useEffect:", count)})组件的初始化和更新都会执行2、空数组const [count, setCount] = useState(0)useEffect(() => { console.log("useEffect:", count)}, []).原创 2021-02-21 02:24:14 · 18136 阅读 · 0 评论 -
React中使用echarts 5.0
react中使用echarts和vue中差不多首先下载echartsnpm install echarts --save我这里下载的是5.0版本的按照官网的完整代码提示 复制下来就可以了在componentDidMount初始图表,配置项官网都有介绍代码可以直接使用import React, { Component } from 'react'import * as echarts from 'echarts/core';import { GridCompone原创 2021-02-17 02:24:34 · 1797 阅读 · 1 评论 -
react保留后台返回的换行功能
在父级元素中添加white-space:pre-wrap,这里写在行内效果:'↵'的发现无法换行,只需要将其替换成\n效果:原创 2021-02-04 00:29:18 · 874 阅读 · 0 评论 -
解决React中setState异步问题
setState 只在合成事件和钩子函数中是异步的,在原生事件和 setTimeout 中都是同步的。 合成事件:例如onClick等 原生事件:比如通过addeventListener添加的,dom中的原生事件 先举个栗子以上代码会输出啥嘞?原因:React会将多个setState的调用合并成一个来执行,这意味着当调用setState时,state并不会立即更新。组件渲染的结果是1,并且在控制台中输出了10次0,说明每个循环中,拿到的state仍然是更新之前的。这是原创 2021-01-23 19:50:35 · 6003 阅读 · 0 评论 -
redux之reducer 为什么必须是纯函数?
Reducer 为什么必须是纯函数?前言本文不讲 react、redux、action、reducer 的具体应用,只是单纯的讲解 reducer 为什么必须是纯函数,本文适合有一定 redux 开发经验的同学。用过 react 的同学对 redux 一定不会陌生,我们知道 redux 可以提供可预测化的状态管理。在一个应用中,所有的 state 都是以一个对象树的形式存在一个单一的 store 中,唯一改变 state 的办法就是触发 action,而 reducer 就是用来编写专门的函数决定每个转载 2021-01-14 09:47:00 · 1141 阅读 · 1 评论