如何在頁面加載時顯示占位符而不是狀態值？

Question

我試圖顯示輸入的占位符而不是其狀態值。 當我加載頁面時，它顯示一個空白的選擇框，這是有道理的，因為頁面第一次加載時 testType 狀態為空。 我怎樣才能讓它只顯示占位符而不是空狀態？

 function RandomSelection(props) { const [testType, setTestType] = useState(null); const handleTestType = value => { setTestType(value); }; return( <Select placeholder="Test Type..." value={testType} onChange={handleTestType} > <Option value="Option 1"> Option 1 </Option> <Option value="Option 2">Option 2</Option> <Option value="Option 3">Option 3</Option> </Select> ) }

Select 選項來自 Ant Design，但是我覺得這個解決方案可能也適用於 Material-UI 和 Bootstrap。

Answer 1

由於您從不顯示導入路徑，並且您的代碼使用 Antd 的Select工作得非常好，我的猜測是您使用的是Select from MUI（部分原因是您還在問題中標記了material-ui ）。 所以檢查你的導入路徑，因為 MUI Select占位符是由label屬性設置的：

對

import { Select } from 'antd';

錯誤的

import { Select } from '@mui/material';

Answer 2

在const [testType, setTestType] = useState(null); ，將useState的默認值設置為您希望占位符的null而不是null 。

Answer 3

在 And Design 的文檔中，它說placeholder應該是一個React Node ，這應該是它不工作的原因。