Question

如果验证失败，我使用Popup在输入上显示错误消息。

<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返回bool类型而不是字符串bool，最后，检查您是否可以在使用onOpen处理程序打开弹出窗口后将其关闭，以确保您能够至少控制组件的状态。

最后，作为一个黑客，你可以在{{display: "none"}}

时通过Popup的样式道具添加this.state.error === true

在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'/>

显示基于状态的弹出窗口

2 个答案: