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

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

React Visual - 文本自动转链接 (advanced)

2019-09-25 描述渲染一个字符串做为纯文本,并将其中的 URL 部分转换为一个 <a> 元素。使用 String.prototype.split()和带正则表达式的 String.prototype.match()来找出文本中的 URL 返回一个 <React.Fragment>,将匹配的 URL 渲染为一个 <a> 元素,如果必要的话对缺失的协议前缀进行处理,剩余的字符串做为纯文本进行渲染实现 functionAuto

React Visual - 提示组件

2019-09-24 描述根据 type 属性来创建不同的提示组件。为组件中的元素定义适当的 CSS 样式和动画使用 React.setState()hook 创建 isShown 和 isLeaving 状态变量,并设置他们的默认值为 false 定义 timeoutId 用来保存计时器实例,以便在组件卸载时进行清除使用 React.setEffect()hook 更新 isShown 的值为 true,当组件卸载时清除使用过的 time

React Visual - 手风琴 (advanced)

2019-09-23 描述渲染一个包含多个可折叠内容组件的手风琴菜单。定义一个 AccordionItem 组件,并将其传递给 Accordion。除了在 props.children 中函数名称标识为 AccordionItem 的节点外移除其余不必要的节点每一个 AccordionItem 组件都渲染一个 <button>,通过 props.handleClick 回调和传递到组件中的内容 props.children 来更

React Input - 输入框向父组件直接传值

2019-09-20 描述渲染一个可以使用回调函数将值传递给父组件的 <input> 元素。使用对象解构为 <input> 元素的特定属性设置默认值渲染一个包含适当属性的 <input> 元素,在 onChange 事件中使用 callback 函数将输入框的值传递给父组件实现 functionUncontrolledInput({callback,type='text',disabled=false,readOnly=f

React Input - 文本输入框向父组件传值

2019-09-19 描述渲染一个可以使用回调函数将值传递给父组件的 <textarea> 元素。使用对象解构为 <textarea> 元素的特定属性设置默认值渲染一个包含适当属性的 <textarea> 元素,在 onChange 事件中使用 callback 函数将文本框的值传递给父组件实现 functionTextArea({callback,cols=20,rows=2,disabled=false,readOnl

React Input - 滑动元素向父组件传值

2019-09-18 描述渲染一个可以使用回调函数将值传递给父组件的滑动元素。使用对象解构为 <input> 元素的特定属性设置默认值渲染一个类型为"range"、包含适当属性的 <input> 元素,在 onChange 事件中使用 callback 函数将输入框的值传递给父组件实现 functionSlider({callback,disabled=false,readOnly=false}){return(<in

React Input - 下拉列表向父组建传值

2019-09-17 描述渲染一个 <select> 元素,可以使用回调函数将值传递给父组建。使用对象解构对 <select> 元素中的某些属性进行默认值设置根据传入的属性渲染一个 <select> 元素,在 onChange 事件中使用 callback 函数将选中的值传递给父元素使用 values 数组中每一项解构为 value 和 text 的数据来渲染 option 元素,并通过 <select> 元素中定义的初始值 value 来设置

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