反应自定义合成事件

Question

我想要创建一个自定义的合成事件，这样我就可以根据配置选项有条件地附加一个处理程序(一个touchstart或者单击)，但是，我似乎找不到任何关于如何完成这个操作的信息--理想情况下，我希望下面( onTap属性)

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

然后，onTap会在touchstart或单击或配置中定义的任何事件中附加处理程序。

这个是可能的吗？是否有可能定义一个自定义属性来连接每个组件？

问候

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)
}