根据状态显示弹出窗口

Question

如果验证失败，我会使用弹出窗口在输入中显示错误消息。

<Popup
    trigger={InputComponent}
    open={state.error}
    content={errorMessage}
/>

这工作正常，但烦人的部分是当我聚焦元素时出现一个空的弹出窗口。据我所知，我无法禁用此行为。我试过添加 on={null} 和 on="none"，但这一切都不起作用。

有什么想法吗？最好禁用触发弹出窗口，但允许它仅在状态值上可见。

Answer 1

用法与文档中提到的一种情况非常相似：https://react.semantic-ui.com/modules/popup#popup-example-controlled

确保 state.error returns 布尔类型而不是字符串 bool 最后，检查您是否能够在弹出窗口打开后使用 onOpen 处理程序将其关闭作为附加措施确保您至少能够控制组件的状态。

最后，作为hack，你可以在this.state.error === true

时通过Popup的style prop添加一个{{display: "none"}}

2.5 秒后自动弹出的 SUI 文档中的示例用法：

import React from 'react'
import { Button, Grid, Header, Popup } from 'semantic-ui-react'

const timeoutLength = 2500

class PopupExampleControlled extends React.Component {
  state = { isOpen: false }

  handleOpen = () => {
    this.setState({ isOpen: true })

    this.timeout = setTimeout(() => {
      this.setState({ isOpen: false })
    }, timeoutLength)
  }

  handleClose = () => {
    this.setState({ isOpen: false })
    clearTimeout(this.timeout)
  }

  render() {
    return (
      <Grid>
        <Grid.Column width={8}>
          <Popup
            trigger={<Button content='Open controlled popup' />}
            content={`This message will self-destruct in ${timeoutLength / 1000} seconds!`}
            on='click'
            open={this.state.isOpen}
            onClose={this.handleClose}
            onOpen={this.handleOpen}
            position='top right'
          />
        </Grid.Column>
        <Grid.Column width={8}>
          <Header>State</Header>
          <pre>{JSON.stringify(this.state, null, 2)}</pre>
        </Grid.Column>
      </Grid>
    )
  }
}

export default PopupExampleControlled

Answer 2

如果有人遇到同样的问题，最简单的解决方法是将自定义弹出窗口样式添加到您的弹出标签，并使用如下状态定义不透明度。

const style = {
    opacity: this.state.isOpen ? "1" : "0"
}


<Popup style={style} trigger={<Button icon='add' />} content='Add users to your feed'/>

根据状态显示弹出窗口

Show popup based on state

semantic-ui

semantic-ui-react