семантический интерфейс реагирует раскрыть взаимодействовать со скрытой формой - PullRequest
Новая
       61

семантический интерфейс реагирует раскрыть взаимодействовать со скрытой формой

0 голосов
/ 12 сентября 2018

Использование Semantic UI React's 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>

1 Ответ

0 голосов
/ 12 сентября 2018

Технически ваш главный контент в вашем Reveal покрывает форму ниже. Меняется только непрозрачность. Он все еще в DOM с более высоким z-индексом.

Существует несколько способов решить эту проблему.

1) Когда анимация заканчивается, установите display: none в верхней части «видимого» раскрытия. Это означает, что вам придется слушать конец анимации. А когда мышь уходит, вам нужно добавить display: block назад, чтобы вы могли видеть анимацию. Наверное, больше работы, чем нужно.

2) Измените z-index на меньшее значение, когда анимация закончится. Та же проблема, что и выше.

3) Установите pointer-events: none сверху "видимого" раскрытия. Это эффективно заставляет пользовательские события щелчка проходить через прозрачный Reveal и вместо этого попадает в форму ниже. Это важно знать, если вы собираетесь использовать Reveal в какой-то момент, чтобы фактически заблокировать форму. <Reveal.Content visible style={{pointerEvents: 'none'}}>

...