@accurat/event-utils 中文文档教程
@accurat/event-utils
处理事件时在 React 的 JSX 中使用的高阶函数
这些函数的目的是在处理 React 中的事件时减少样板代码，并将纯状态设置器直接连接到组件。
Install
yarn add @accurat/event-utils
Usage
给定 react 中的基本功能状态设置器
setName = (name) => {
this.setState({ name })
}
或 mobx-state-tree
setName(name) {
self.name = name
}
中带有 @accurat/event-utils 的等效设置器，您可以直接在 JSX 组件上使用设置器：
import { eventValueExtractor } from '@accurat/event-utils'
// ...
<input value={name} onChange={eventValueExtractor(setName)} />
另一个常见用例是链接和自定义路由：
import { preventingDefault } from '@accurat/event-utils'
// ...
<a href={href} onClick={preventingDefault(gotoPage)} />
这些功能还使用了函数式编程的力量????，所以你可以将它们组合起来！
import { preventingDefault, replaceArguments } from '@accurat/event-utils'
// ...
<div>
{options.map((option, i) =>
<a
href=""
key={i}
onClick={preventingDefault(replaceArguments(setName, option))}
>
{option}
</a>
)}
</div>
这样您就不必再在 React 中使用构建模式，并且您可以摆脱组件中所有这些样板方法！
您可以去掉的另一件事是 onKeyDown 方法，里面有 switch case，它会在某个 event.key 上触发一个函数，您可以改用对象关联
import { attachListenersToKeys } from '@accurat/event-utils'
// ...
<input
type="text"
onKeyDown={attachListenersToKeys({
Enter: preventingDefault(state.commit),
ArrowDown: state.selectNext,
ArrowUp: state.selectPrev,
})}
/>
API
：可用的函数有：
- preventingDefault(fn)
- stoppingPropagation(fn)
- eventValueExtractor(fn)
- eventTargetExtractor(fn)
- addArguments(fn, …args)
- replaceArguments(fn, …args) (similar to
lodash.partial)
如果名称不够清楚，你可以查看源代码，功能真的很简单明了。
请注意，React 还支持将 null 传递给函数以外的事件绑定，因此您也可以
<a href="" onClick={preventingDefault(this.props.onClick)} />
允许组件接收 null 作为 onClick 属性，感谢行
if (fn === null) return null
@accurat/event-utils
High order functions to use in React's JSX when working with events
The objective of these functions is to reduce the boilerplate code when handling events in react, and to wire up the pure state setters directly to the component.
Install
yarn add @accurat/event-utils
Usage
Given a basic and functional state setter in react
setName = (name) => {
this.setState({ name })
}
or the equivalent in mobx-state-tree
setName(name) {
self.name = name
}
with @accurat/event-utils you can use the setter directly on the JSX component:
import { eventValueExtractor } from '@accurat/event-utils'
// ...
<input value={name} onChange={eventValueExtractor(setName)} />
Another common use case is with links and custom routing:
import { preventingDefault } from '@accurat/event-utils'
// ...
<a href={href} onClick={preventingDefault(gotoPage)} />
Also those functions use the powers of functional programming ????, so you can combine them!
import { preventingDefault, replaceArguments } from '@accurat/event-utils'
// ...
<div>
{options.map((option, i) =>
<a
href=""
key={i}
onClick={preventingDefault(replaceArguments(setName, option))}
>
{option}
</a>
)}
</div>
This way you don't have to use anymore the build pattern in react, and you can get rid of all those boilerplate methods in the component!
Another thing you can get rid of is the onKeyDown method with the switch case inside that fires a function on a certain event.key, you can use an object association instead:
import { attachListenersToKeys } from '@accurat/event-utils'
// ...
<input
type="text"
onKeyDown={attachListenersToKeys({
Enter: preventingDefault(state.commit),
ArrowDown: state.selectNext,
ArrowUp: state.selectPrev,
})}
/>
API
The available functions are:
- preventingDefault(fn)
- stoppingPropagation(fn)
- eventValueExtractor(fn)
- eventTargetExtractor(fn)
- addArguments(fn, …args)
- replaceArguments(fn, …args) (similar to
lodash.partial)
If the names aren't self-explanatory enough, you can check out the source code, the functions are really simple and straightforward.
Note that react also supports passing null to the event binding other than a function, so you will be also able to do
<a href="" onClick={preventingDefault(this.props.onClick)} />
allowing the component to receive null as the onClick prop, thanks to the line
if (fn === null) return null
