4

我最近在使用它，它工作得非常好，但是当我必须在孩子身上react-spring应用时我遇到了一些问题。onClick

这是我的主要结构：

<anim.button  className="c"
   style={{ opacity: opacity.interpolate(o => 1 - o), transform }}>
   <Bar />
</anim.button>
<anim.button  className="c"
   style={{ opacity, transform: transform.interpolate(t => `${t} 
   rotateX(180deg)`) }}>
   <Bar />
</anim.button>

当然，一个onClickon theanim.button可以很好地工作，但这不是我正在尝试的。

这是我的<Bar />组件：

  const Bar = () => (
    <div className="bar">
      <Checkbox
        onClick={() => {
          set(state => !state)
        }}
      />
    </div>
  )

我也尝试使用 the<anim.div>而不是 an<anim.button>但这给了我相同的结果。

现在这里的问题是它似乎在我的组件react-spring上放置了一个层。<Bar />有没有办法onClick在我的组件中使用而不是使用到的那个anim.button？

4

4 回答 4

1

鉴于 Checkbox 也是一个组件并且它可能没有处理 onClick 尝试将onClick放在包装 div 上或检查 Checkbox 组件。

于 2019-11-14T15:56:50.277 回答
1

从未使用过 react-spring，但Bar像这样构建组件可能会奏效。

const Bar = (props) => (
<div onClick={() => {set(state => !state)}}>
 <anim.button  {...props}>
   <div className="bar">
     <Checkbox />
   </div>
 </anim.button>
</div>)

然后像这样渲染它：

<Bar className={'c'} style={{ opacity: opacity.interpolate(o => 1 - o), transform}}/>
<Bar className="c" style={{ opacity, transform: transform.interpolate(t => `${t}
    rotateX(180deg)`) }}/>
于 2019-11-14T18:40:34.327 回答
0

您可以将 Bar 包装在一个 div 中：<animated.div>您将一个按钮包装在一个不太好的复选框周围。onClick将按预期触发。

<animated.div className="c"
   style={{ opacity, transform: transform.interpolate(t => `${t} 
   rotateX(180deg)`) }}>
   <Bar />
</animated.div>
于 2019-11-14T17:34:30.950 回答
0

问题已被发现，实际上与react-spring. 位置绝对样式导致了这种情况。

于 2019-11-15T11:23:44.577 回答