Reactjs 语义用户界面与隐藏形式交互

使用语义ui React的两张不同卡片显示。先是可见的，然后是隐藏的。但是隐藏的那个有一个窗体和按钮，我需要与之交互。是否有一种简单的方法使表单可访问？或者，这真的是用JS查找项目，然后删除要与之交互的属性的唯一方法吗？请有人给我一些建议。这是我目前的代码。是的，我知道代码现在很草率。这是暂时的

<Reveal animated='fade' instant key={i}>
  <Reveal.Content visible>
    <Card
      centered={true}
      key={i}
      raised={true}
      style={{'backgroundColor':'blue', color:'white'}}
    >
      <Card.Header textAlign='center' as='h1'>
        {Object.keys(each).toString()}
      </Card.Header>
      <Card.Header textAlign='center' as='h3'>
        No peeking on other players wagers!
      </Card.Header>
      <Card.Header as='h1'></Card.Header>
      <Card.Header as='h1'></Card.Header>
      <Card.Header as='h2'></Card.Header>
    </Card>
  </Reveal.Content>

  <Reveal.Content hidden>
    <Card
      centered={true}
      key={i}
      raised={true}
    >
      <Card.Header textAlign='center' as='h1'>
        {Object.keys(each).toString()}
      </Card.Header>
      <Card.Header textAlign='center' as='h3'>
        Please make your wager!
      </Card.Header>
      <Card.Content>
        <Form
          as='form'
        >
          <Form.Field>
            <Label>Place your Wager</Label>
            <Input icon='money' iconPosition='right' focus placeholder='Wager' />
          </Form.Field>
          <Button 
            type='submit'
            size='large'
            color='blue'
          >
            Submit
          </Button>
        </Form>
      </Card.Content>
    </Card>
  </Reveal.Content>
</Reveal>

{Object.keys（每个）.toString（）}
不要偷看其他玩家下注！
{Object.keys（每个）.toString（）}
请下注！
下注
提交

从技术上讲，您展示的主要内容包括以下表格。只有不透明度在改变。它仍然在具有更高z索引的DOM中

有很多方法可以解决这个问题

1） 动画结束后，在顶部的“可见”分隔缝上设置一个

显示：无

。这意味着您必须收听动画结尾。当鼠标离开时，您需要向后添加

display:block

，以便查看动画。可能比你需要的工作更多

2） 动画结束时，将z索引更改为较低的值。同上

3） 在顶部“可见”分隔缝上设置指针事件：无。这有效地使用户的点击事件通过透明显示，并点击下面的表单。要知道这一点很重要，以防您打算在某个点使用分隔缝来实际阻止表单<代码>