Estoy tratando de mostrar el marcador de posición de una entrada en lugar de su valor de estado. Cuando cargo la página, muestra un cuadro de selección en blanco, lo que tiene sentido porque el estado testType es nulo cuando la página se carga por primera vez. ¿Cómo puedo hacer que solo muestre el marcador de posición en lugar del estado nulo?
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> ) }La opción Seleccionar es de Ant Design, sin embargo, creo que la solución a esto también puede aplicarse a Material-UI y Bootstrap.
Dado que nunca muestra la ruta de importación, y su código funciona perfectamente bien con Select de Antd, supongo que está utilizando Select from MUI (en parte porque también etiquetó material-ui en su pregunta). Así que verifique su ruta de importación, porque el marcador de posición MUI Select está establecido por la label prop:
Derecha
import { Select } from 'antd';Equivocado
import { Select } from '@mui/material';En const [testType, setTestType] = useState(null); , establezca el valor predeterminado de useState en lo que desea que sea el marcador de posición en lugar de null .