{edit.renderEdit(<>
{state.formData.taskName}
{(() => {
const rate = Math.min(10, state.formData.taskName.length);
return "★★★★★★★★★★☆☆☆☆☆☆☆☆☆☆".slice(10 - rate, 10 - rate + 10);
})()}
)}
{edit.renderButton(<>
)}
);
});
```
## Hooks钩子(拦截器)
- editor有很多内置的钩子函数，用于监听（拦截）各种行为，比如监听节点的点击事件：
```jsx
editor.hooks.onClickNode.use(({ node }) => {
console.log('click node', node);
});
```
- 钩子函数可以阻止，在添加的拦截函数中抛出异常或者返回`Promise.reject()`就可以阻止行为。比如添加节点的时候限制只能有一个开始（结束）节点的控制行为：
```jsx
hooks.onAddNode.use(async ({ node }) => {
if (node.shape == START_NODE) {
if (!config.onlyOneStartNode) {return; }
const { cells } = await methods.getGraphData();
if (!!cells.find(i => i.shape === START_NODE && i.id !== node.id)) {
alert('只能存在一个开始节点！');
return Promise.reject('only one start node!');
}
} else if (node.shape == END_NODE) {
if (!config.onlyOneEndNode) {return; }
const { cells } = await methods.getGraphData();
if (!!cells.find(i => i.shape === END_NODE && i.id !== node.id)) {
alert('只能存在一个结束节点！');
return Promise.reject('only one end node!');
}
}
});
```
## 所有可用的Hook钩子
```jsx
export function useFlowEditorHooks() {
const hooks = {
onMouseupCanvas: createHooks<(e: MouseEvent) => void>(), // 点击画布动作
onGraphLoaded: createHooks<(module: iGraphModule) => void>(), // Graph模块加载完毕
onGraphReady: createHooks<(module: iGraphModule) => void>(), // graph初始化准备完毕触发动作，onGraphLoaded执行完毕之后就会执行这个动作
onFlowMounted: createHooks<() => void>(), // ReactX6Editor组件的mounted动作
onProcessOperators: createSyncHooks<(operators: iFlowEditorOperatorMeta[]) => void>(), // 处理操作栏按钮
/*节点钩子*/
onClickNode: createHooks<(e: NodeView.PositionEventArgs