如何在页面加载时显示占位符而不是状态值？

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 ，这应该是它不工作的原因。