Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

React Input - 显示密码框内容

2019-09-16 描述渲染一个带有显示按钮的密码输入框。使用 React.useState()hook 创建一个 shown 状态变量并设置他的值为 false 将 <input> 和 <button> 元素包裹在一个 <div> 中,通过按钮对输入框的"text"和"password"类型进行切换实现 functionPasswordRevealer({value}){const[shown,setShown]=Reac

React Input - 多选列表向父组件传值

2019-09-12 描述渲染一个多选框列表,可以使用回调函数向父组件传递被选中的一个或多个值。使用 React.setState()创建一个 data 状态变量,设置 options 属性为他的始化值创建一个 toggle 方法,可以使用列表中 checked 的选中与否来更新 data 状态变量,可以调用组件属性中的 onChange 回调渲染一个 <ul> 元素,使用 Array.prototype.map()对 data 状态变

React Input - 单词个数限制

2019-09-11 描述渲染一个带有单词个数限制功能的 textarea 组件。使用 React.useState()hook 创建 content 和 wordCount 状态变量,他们的值分别设为 value 和 0 创建一个 setFormattedContent 方法,使用 String.prototype.split('')把输入的内容转换为一个单词数组并检查使用了 Array.prototype.filter(Bool

React Input - 限制 textarea 输入的长度

2019-09-10 描述渲染一个字符受到限制的 textarea 组件。使用 React.useState()hook 创建一个 content 状态变量并设置他的值为 value。创建一个 setFormattedContent 方法,当长度大于 limit 时可以对其进行截断使用 React.useEffect()hook 来调用参数为 content 状态变量的 setFormattedContent 方法让一个 <textar

React Input - input 传值给父组件

2019-09-09 描述使用内部声明的方式渲染一个 <input> 元素,让其可以使用回调函数将值传递给父亲组件。使用对象解构为 <input> 元素的某些属性设置默认值使用 React.setState()hook 创建一个 value 状态变量,给定值等于 defaultValue 的属性值使用第二个参数设置为 value 状态变量的 React.useEffect()hook,这样每当 value 更新时就可以对 callb

React Hooks - 使用延迟

2019-09-06 描述一个使用声明方式实现的 setTimeouthook。创建一个接受 callback 和 delay 的自定义 hook 使用 React.useRef()hook 为回调函数创建一个 ref 使用 React.useEffect()hook 记录最近的一次回调使用 Rect.useEffect()hook 执行和清除 timeout 实现 constuseTimeout=(callback,delay)=>{

React Hooks - 使用浏览器端识别

2019-09-05 描述一个可以检查代码代码运行在浏览器端还是服务端的 hook。创建一个可以返回适当对象的自定义 hook,使用 typeofwindow,window.document 和 window.document.createElement 来检查代码是否运行在浏览器中使用 React.useState()hook 定义 inBrowser 状态变量使用 React.useEffect()hook 来更新 inB

React Hooks - 使用间隔

2019-09-04 描述用声明的方式实现一个 setIntervalhook。创建一个接受 callback 和 delay 的自定义 hook 使用 React.useRef()hook 为回调方法创建一个 ref 使用 React.useEffect()hook 记住最后一个回调使用 Rect.useEffect()hook 设置和清除 interval 实现 constuseInterval=(callback,delay)=>

React Hooks - 使用 fetch 请求

2019-09-03 描述以声明的方式实现一个 fetchhook 创建一个接受 url 和 options 的自定义 hook 使用 React.useState()hook 初始化 response 和 error 状态变量使用 React.useEffect()hook 用同步的方式调用 fetch()并更新变量状态返回一个包含 response 和 error 状态变量的对象实现 constuseFetch=(url,options)=

React Hooks - 使用外部点击

2019-09-02 描述一个 hook,可以处理包装在组建外部的点击事件。创建一个自定义的 hook,使用 ref 和 callback 来处理 click 事件使用 React.useEffect()hook 来添加或清除 click 事件使用 React.useRef()hook 为你的点击组建创建一个 ref,并将他作为参数传递给 useClickInsidehook 实现 constuseClickOutside=(ref,c

React Hooks - 使用内部点击

2019-08-30 描述一个 hook,可以处理包装在组建内部的点击事件。创建一个自定义的 hook,使用 ref 和 callback 来处理 click 事件使用 React.useEffect()hook 来添加或清除 click 事件使用 React.useRef()hook 为你的点击组建创建一个 ref,并将他作为参数传递给 useClickInsidehook 实现 constuseClickInside=(ref,ca

React Array - 表格数据映射

2019-08-29 描述使用对象数组和属性名称列表渲染一个动态创建行的表格。使用 Object.keys(),Array.prototype.filter(),Array.prototype.includes()和 Array.prototype.reduce()得到一个 filteredData 数组,使其数组中的每一个对象中都包含 propertyNames 中所指定的 key 值渲染一个 <table> 元素,表

React Array - 表格数据

2019-08-28 描述根据原生数组动态渲染一个带行的表格。渲染一个带有两列(IDandValue)的 <table> 元素使用 Array.prototype.map 渲染 data 中的每一项作为一个 <tr> 元素,该元素包含了索引和值。使用索引和值的组合作为 key 实现 functionDataTable({data}){return(<table><thead><tr><th>ID</th><th>Value

React Array - 列表数据

2019-08-27 描述使用一个原始数组中的数据渲染出一个列表元素。使用 isOrdered 属性值来判断渲染的是 <ol> 列表,还是 <ul> 列表使用 Array.prototype.map 渲染 data 中的每一项作为一个 <li> 元素,根据每一项的索引和值生成一个 keyisOrdered 属性的默认值为 false,使用 <ul> 列表进行渲染实现 functionDataList({isOrdered,data}){

每天 30 秒系列之 React

精选有用的 React 片段,帮助你获取最佳实践 Array 列表数据表格数据表格数据映射 Hook 使用内部点击使用外部点击使用 fetch 请求使用间隔使用浏览器端识别使用延迟 Inputinput 传值给父组件限制 textarea 输入的长度单词个数限制多选列表向父组件传值显示密码框内容下拉列表向父组建传值滑动元素向父组件传值文本输入框向父组件传值输入框向父组件直接传值 Visual 手风琴 advanced 提示组件文本

CSS 其他 - 自定义变量

2019-08-26 描述 CSS 变量包含在整个文档中可重复使用的特定值。HTML<pclass="custom-variables">CSSisawesome!</p>CSS:root{/*Placevariableswithinheretousethevariablesglobally.*/}.custom-variables{--some-color:#da7800;--some-keyword:

CSS 其他 - 计数器

2019-08-23 描述计数器本质上是由 CSS 维护的变量,他的值可以通过 CSS 跟踪元素被使用的次数规则来进行递增。HTML<ul><li>Listitem</li><li>Listitem</li><li>Listitem<ul><li>Listitem</li><li>Listitem</li><li>Listitem</li></ul></li></ul>CSSul{counter-reset:

CSS 其他 - Cacl()

2019-08-22 描述 calc()函数允许使用数学表达式来定义 CSS 值,采用数学表达式的结果作为属性值。HTML<divclass="box-example"></div>CSS.box-example{height:280px;background:#222url('https://image.ibb.co/fUL9nS/wolf.png')no-repeat;background-positi

CSS 交互 - 可切换的开关

2019-08-21 描述使用纯 CSS 构建一个可切换的开关。HTML<inputtype="checkbox"id="toggle"class="offscreen"/><labelfor="toggle"class="switch"></label>CSS.switch{position:relative;display:inline-block;width:40px;height:20px;bac

CSS 交互 - 相邻兄弟视觉弱化

2019-08-20 描述鼠标移上时,对相邻的兄弟元素进行视觉上的弱化。HTML<divclass="sibling-fade"><span>Item1</span><span>Item2</span><span>Item3</span><span>Item4</span><span>Item5</span><span>Item6</span></div>CSSspan{padding:01rem;t