时间戳

首页 > 解决方案 > 如何在页面加载时显示占位符而不是状态值？

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

问题描述

我试图显示输入的占位符而不是其状态值。当我加载页面时，它会显示一个空白选择框，这是有道理的，因为页面首次加载时 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。

标签： javascripthtmlreactjsreact-hooksuse-state

解决方案

由于您从不显示导入路径，并且您的代码使用 Antd 工作得非常好Select，我猜您正在使用Selectfrom MUI（部分原因是您还在问题中标记了）。所以检查你的导入路径，因为 MUISelect占位符是由labelprop 设置的：

正确的

import { Select } from 'antd';

错误的

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

推荐阅读