He estado usando el paquete "@material-ui/core": "4.11.2" con "react": "16.8.6" . En el componente TextField , cuando el accesorio de select es true , no puedo obtener la propiedad de name de TextField del objeto de event en la función handleFocus .
<TextField id="standard-select-currency" name="mySelectBox" select label="Select" value={currency} onChange={handleChange} onFocus={handleFocus} helperText="Please select your currency" > {currencies.map((option) => ( <MenuItem key={option.value} value={option.value}> {option.label} </MenuItem> ))} </TextField> Aquí están las funciones handleFocus y handleChange .
const handleChange = (event) => { console.log( "event.target ==>", event.target, "event.target.name ==>", // mySelectBox event.target.name ); }; const handleFocus = (event) => { console.log( "event.target ==>", event.target, "event.target.name ==>", // undefined event.target.name ); };Creo un ejemplo completo en este sandbox .
Verifiqué con algunos registros de consola y noté que la propiedad de name no es un atributo de event.target . El event.target que ha registrado se muestra
<div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input" tabindex="0" role="button" aria-haspopup="listbox" aria-labelledby="standard-select-currency-label standard-select-currency" id="standard-select-currency">$</div> que tiene los atributos class , tabindex , role , aria-haspopup , aria-labelledby labelledby e id
pero el hermano de su objetivo al que accede event.target.nextSibling es
<input name="mySelectBox" aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput" aria-describedby="standard-select-currency-helper-text" value="USD"></input>o
<input name="mySelectBox" aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput" aria-describedby="standard-select-currency-helper-text" value="EUR"></input> dependiendo de la moneda que seleccione, tiene atributos name , aria-hidden , tabindex , class , aria-describedby y value
luego puede acceder al atributo de name dentro de handleFocus como event.target.nextSibling.getAttribute('name') o event.target.nextSibling.name
El Texfield no pasa directamente el onFocus a la entrada. de MUI ,
La referencia se reenvía al elemento raíz.
Cualquier otro accesorio suministrado se proporcionará al elemento raíz (FormControl).
El onFocus se pasa al elemento FormControl, que es un div, no una entrada, y no tiene nombre. Puede usar NativeSelect o pasar la propiedad onFocus a los accesorios de entrada, lo que no funcionó muy bien cuando probé en el entorno limitado que proporcionó.
La solución más rápida para esto es pasar una referencia a la entrada y, al enfocarse, obtener el nombre de la referencia. Así es como se verá su código entonces.
export default function MultilineTextFields() { const [currency, setCurrency] = React.useState("EUR"); const inputRef = React.useRef() const handleChange = (event) => { setCurrency(event.target.value); console.log( "event.target ==>", event.target, "event.target.name ==>", event.target.name ); }; const handleFocus = (event) => { console.log( "event.target ==>", inputRef, "event.target.name ==>", inputRef.current.node.name ); }; return ( <form noValidate autoComplete="off"> <TextField inputRef= {inputRef} id="standard-select-currency" name="mySelectBox" select label="Select" value={currency} onChange={handleChange} onFocus={handleFocus} helperText="Please select your currency" > {currencies.map((option) => ( <MenuItem key={option.value} value={option.value}> {option.label} </MenuItem> ))} </TextField> </form> ); }Aquí está la caja de arena que usé https://codesandbox.io/s/material-demo-forked-zjlz3?file=/demo.js
Puede pasar un SelectProps al TextField y usar la etiqueta <option> en lugar del componente <MenuItem> como digo a continuación:
<TextField id="standard-select-currency" name="mySelectBox" select label="Select" value={currency} onChange={handleChange} onFocus={handleFocus} helperText="Please select your currency" SelectProps={{ native: true }} // ************ > {currencies.map((option) => ( <option key={option.value} value={option.value}> {option.label} </option> ))} </TextField>Modifiqué tu caja de arena .