上文
前言
之前的 api
设计感觉有些随意,部分 options
的修改,也没有很好地支持,于是乎重新整理了一下传参,把 node
的属性,和 数据处理
的属性做了区分,更容易理解。
例子
例子基本和 二
中保持了一致,就是展现了修改后,可以修改 debounce
和 subscribes
的功能。想通部分的代码就不贴了。
代码逻辑
export const TestButton: React.FC = () => {
const [disabled, setDisabled] = useState(true);
const [debounce, setDebounce] = useState(0);
const [subs, setSubs] = useState(['input', 'select']);
const { rukawaValues, valuesDetail } = useRukawa(
{
name: 'button',
subscribes: subs,
valueState: true
},
{
debounce
}
)
useEffect(() => {
console.log('rukawaValues', rukawaValues, valuesDetail);
const dis = !(rukawaValues.select && rukawaValues.input);
setDisabled(dis);
}, [rukawaValues])
return (
<div>
<Button type="primary" disabled={disabled}>查询</Button>
<div>
<Button onClick={() => {
if (!debounce) {
setDebounce(500)
} else {
setDebounce(0)
}
}}>修改debounce</Button>
</div>
<div>
<Button onClick={() => {
setSubs(['input'])
}}>修改subscribes</Button>
</div>
</div>
)
}
图文结解说
加了 subscribes
和 debounce
的 state
。
首先,在出初始情况下,button
订阅了 select
和 input
的值,并且没有设置 debounce
。
点击了修改 debounce
的按钮以后,相当于设置了 500ms
的防抖。
可以看到新的一行没有及时输出,说明 debounce
生效了。
然后点击修改 subscribes
的按钮,将订阅改为 input
。
可以看到最新传递过来的值已经没有了 select
,说明 subscribes
也成功修改了。
Api
仓库
props
参数 | 说明 | 类型 | 必填 |
---|---|---|---|
name | 节点名称 | string |
是 |
subscribes | 订阅节点名称 | string[] |
否 |
initialValue | 节点初始值 | any |
否 |
broadcastOnMounted | 初次挂载是否广播value | boolean |
否 |
ignoreSameValue | 是否忽略相同的值 | boolean |
否 |
valueState | 是否需要返回当前节点 value | boolean |
否 |
options
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
debounce | 防抖 | number |
– |
formatResult | 对 rukawaValue 进行预处理 |
(values) => any |
– |
pipes | rx pipes | OperatorFunction<any, any>[] |
– |
return
参数 | 说明 | 类型 |
---|---|---|
rukawaValues | 订阅节点值 | any |
valuesDetail | 当前值和上一次更改的值 | { currentValues, oldValues } |
setRukawaValue | 更改当前节点值 | (value) => void |
value | 当前节点值(需要开启 valueState ) |
any |
其他
开启调试,可以看到每次值的传递。
import { getRukawa } from 'rukawa';
getRukawa().showValue();
Next
抛开不想做的,就剩一个react数据撕裂的问题, 解决完之后1.0
版本就能顺利 GA
了,争取下礼拜解决完,然后发布。
然后就妥妥地往项目里塞,初步的构想是想代替 form
组件在 表单查询
组件中的作用,因为没有那么多复杂的校验,但是却会有联动的需求,感觉用起来会比较契合。
原文链接:https://juejin.cn/post/7232309550259306553 作者:懒狗小前端