Question

我想创建一个自定义合成事件，以便我可以根据配置选项有条件地附加处理程序（touchstart或click）但是，我似乎无法找到有关如何做到这一点的任何信息理想情况下，我想要下面的（onTap属性）

<Button onTap={someHandler} title="Register" />

然后onTap将在touchstart或click或我在配置中定义的任何事件附加处理程序

这可能吗？是否可以定义将挂钩每个组件的自定义属性？

此致

Answer 1

您可以尝试这样的事情：

const W = (() => {
  // all elements supported by React
  const names = 'a|abbr|address|area|article|aside|audio|b|base|bdi|bdo|big|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dialog|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|h1|h2|h3|h4|h5|h6|head|header|hgroup|hr|html|i|iframe|img|input|ins|kbd|keygen|label|legend|li|link|main|map|mark|menu|menuitem|meta|meter|nav|noscript|object|ol|optgroup|option|output|p|param|picture|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|span|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|u|ul|var|video|wbr|circle|clipPath|defs|ellipse|g|image|line|linearGradient|mask|path|pattern|polygon|polyline|radialGradient|rect|stop|svg|text|tspan'.split('|')
  const res = {}
  for (const El of names) {
    res[El] = ({ onTap, ...props }) => {
      onTap = onTap || x=>x
      props.onClick = props.onClick || x => x
      props.onTouchStart = props.onTouchStart || x => x
      <El {...props} onClick={(...args) => {onTap(...args); props.onClick(...args)} onTouchStart={(...args) => {onTap(...args); props.onTouchStart(...args)} />
    }
  }
  return res;
})()

<W.button onTap={() => alert('hi')} />

这会将onTap处理程序添加到任何元素的onClick和onTouchStart事件中。

可以使用类似的技术来包装复合组件。

要包装每个组件，您需要包装React.createElement。

警告：我不保证这是否有效。这可能是一个非常糟糕的主意，应该不在库中使用。

const _ce = React.createElement.bind(React)
React.createElement = (name, props, ...args) => {
  if (!props) {
    return _ce(name, props, ...args)
  }
  const { onTap, ...newProps } = props
  if (onTap) {
    if (props.onClick) {
        newProps.onClick = (...args) => {
          props.onClick(...args)
          onTap(...args)
        }
    } else {
      newProps.onClick = onTap
    }
    if (props.onTouchStart) {
        newProps.onTouchStart = (...args) => {
          props.onTouchStart(...args)
          onTap(...args)
        }
    } else {
      newProps.onTouchStart = onTap
    }
  }
  return _ce(name, newProps, ...args)
}

反应自定义合成事件

1 个答案: