Pregunta:

Soy nuevo en javascript y mecanografiado y me encontré con un problema al tratar de refactorizar un programa simple de tic-tac-toe de vanilla css a componentes MUI.

El método que maneja la entrada para la etiqueta <input type='text'> espera un HTMLInputElement pero recibe un HTMLDivElement porque el TextField de MUI es un div que contiene una input .

Aquí está la pregunta: ¿cómo refactorizaría esta función para obtener el valor de las etiquetas de input del componente MUI de TextField ?

Ideas:

Estaba pensando que debería esperar un HTMLDivElement y luego encontrar su etiqueta de input secundaria, pero ¿cómo haría esto?

Implementación actual

 <input type='text' value={players[0]} onInput={(e) => handleInput(e, 0)} />

Uso de la implementación de MUI TextField

 <TextField type='text' value={players[0]} onInput={(e) => handleInput(e, 0)} />

Método que maneja el evento onInput.

 const handleInput = (event: FormEvent<HTMLInputElement>, index: number) => { console.log("handleInput"); const newPlayers = [...players]; // newPlayers.splice(index, 1, event.currentTarget.value); setPlayers(newPlayers); // Set the state for the players };

Esto es lo que produce el componente TextField de MUI.

 <div class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"> <div class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-formControl css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root"> <input aria-invalid="false" type="text" class="MuiOutlinedInput-input MuiInputBase-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input" value="" id="mui-2"> <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"> <legend class="css-nnbavb"> <span class="notranslate">​</span> </legend> </fieldset> </div> </div>