在儿童中使用点击

Question

我最近正在使用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>

当然，anim.button上的onClick可以正常工作，但这不是我要尝试的。

这是我<Bar />组件：

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

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

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

Answer 1

鉴于复选框也是一个组件，它可能没有 onClick 处理，请尝试放置on单击包装div 或检查复选框组件。

Answer 2

从来没有使用过 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)`) }}/>

Answer 3

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

<animated.div className="c"
style={{ opacity, transform: transform.interpolate(t => `${t} 
rotateX(180deg)`) }}>
<Bar />
</animated.div>

Answer 4

问题已发现，实际上与react-spring没有任何关系。 位置绝对样式是导致这种情况的原因。