僅在單擊按鈕后才在語義 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>
    )
}