semantic ui react reveal 与隐藏形式交互

Question

使用语义 ui React 的 Reveal 有两张不同的卡片。可见的，然后是隐藏的。但是隐藏的有一个我需要与之交互的表单和按钮。有没有一种简单的方法可以使表单易于访问？还是真正唯一的方法是用 JS 找到项目，然后删除与之交互的属性？请有人给我一些建议。这是我当前的 Reveal.And 代码，是的，我知道代码现在很草率。这是暂时的。

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

Answer 1

从技术上讲，您的 Reveal 中的主要内容涵盖了以下表格。只有不透明度在变化。它仍然在 DOM 中具有更高的 z-index。

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

1) 当动画结束时，在最上面设置一个display: none "visible" Reveal。这意味着你必须听动画结束。当鼠标离开时，您需要添加 display: block 回来，这样您才能看到动画。可能比您需要的工作更多。

2) 动画结束时将z-index改小一点。与上述相同的问题。

3) 设置pointer-events: none在顶部"visible"显示。这有效地使用户的点击事件通过透明的 Reveal 并改为点击下面的表单。了解这一点很重要，以防您打算在某个时候使用 Reveal 来实际阻止表单。 <Reveal.Content visible style={{pointerEvents: 'none'}}>

semantic ui react reveal 与隐藏形式交互

semantic ui react reveal interact with hidden form

hidden

visible

reactjs

semantic-ui-react