点击按钮后才会在语义界面中显示消息

Question

在Semantic UI中，消息可以是可见的

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

或隐藏。

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

我有一个按钮，当点击得到一个API响应，然后用文本填充一个消息。我只想在点击按钮后看到消息，因为直到那时它只是屏幕底部的一个空框。我如何在我的函数中实现这一点?

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'

并在函数内设置visibility = 'visible'，然后写入

Answer 1

In Semantic-UI-React thevisible&hidden是布尔标志。你需要传入一个布尔值。,因为你需要在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>
)
}