Question

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

<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。这意味着您必须收听动画结束。当鼠标离开时，您需要向后添加display: block才能看到动画。可能比您需要的工作还要多。

2）动画结束时将z-index更改为较低的值。与上述相同。

3）将pointer-events: none设置在顶部“可见”显示区域上。这有效地使用户的单击事件通过透明的“显示”并改为点击下面的表单。重要的是要知道，以防您打算在某个时候使用“显示”来实际阻止表单。 <Reveal.Content visible style={{pointerEvents: 'none'}}>

语义用户界面反应揭示了与隐藏形式的交互

1 个答案: