在儿童中使用 onclick答案

【问题标题】：Using onclick in children在儿童中使用 onclick
【发布时间】：2020-03-10 15:20:26
【问题描述】：

我最近在使用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 上使用的那个？

【问题讨论】：

set(state => !state) .. 你从哪里得到“set”？
set 来自 React useState 并保存动画的当前状态
但是你没有在任何地方定义它..或者它只是在 sn-p 中丢失？
是的，sn-p 中缺少它，我没有在其中放置基本的react-spring 设置。
您必须将一些 onClick 函数传递给 Bar，以便它可以使用它

标签： javascript reactjs react-spring

【解决方案1】：

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

【讨论】：

即使使用默认的 html 按钮和 onclick 也不会产生任何结果

【解决方案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)`) }}/>

【讨论】：

但这会导致同样的问题。当它不应该点击时，while 栏是可点击的。只有复选框应该

【解决方案3】：

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

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

【讨论】：

这是我最初所做的，但这也不起作用。仅使用 <animated.div> 上的 onClick。 div 变为可点击，但子项不可点击

【解决方案4】：

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

【讨论】：