仅在单击按钮后才在语义 ui 中显示消息

Question

在语义 UI 中，消息可以是可见的

 <Message visible>You can always see me</Message> 

或隐藏。

 <Message hidden>You can't see me</Message>

我有一个按钮，单击该按钮时会收到 API 响应，然后用文本填充消息。 我只想在单击按钮后看到消息，因为在那之前它只是屏幕底部的一个空框。 我怎样才能在我的 function 中实现这个？

import React, { useState } from 'react';
import { Button, Header, Message} from 'semantic-ui-react'

export default function Writer() {

    const [titleText, setTitleText] = useState('');

    const getResponse = () => {
        //Does Some Stuff
        }).then((response) => {
            setTitleText(response.data.choices[0].text)
        })

return (
    <div>
        <Button onClick={getResponse}></Button>

        <Message>
            <Header
                icon textAlign='center'
                content={titleText}
            />
        </Message>
        
    </div>
    )
}

我试图设置一个变量

var visibility = 'hidden'

并在 function 中设置 visibility = 'visible'，然后写入 <Message {visibility}? 但它没有用。 请问有什么建议吗？

Answer 1

在 Semantic-UI-React 中， visible和hidden的是 boolean 标志。 所以需要传入一个Boolean的值。 & 因为你需要它基于titleText来完成，你可以简单地使用length属性。

import React, { useState } from 'react';
import { Button, Header, Message} from 'semantic-ui-react'

export default function Writer() {

    const [titleText, setTitleText] = useState('');

    const getResponse = () => {
        //Does Some Stuff
        }).then((response) => {
            setTitleText(response.data.choices[0].text)
        })

return (
    <div>
        <Button onClick={getResponse}></Button>

        <Message visible={titleText.length > 0} hidden={titleText.length === 0}>
            <Header
                icon textAlign='center'
                content={titleText}
            />
        </Message>
        
    </div>
    )
}