0
108
Visualizações¿Cómo agrego tipo a las funciones onChange y onClick en TypeScript reaccionan?
He definido un componente
type Props = { label:string, autoFocus:boolean, onClick:(e: React.ClickEvent<HTMLInputElement>) => void, onChange: (e: React.ChangeEvent<HTMLInputElement>) => void } const Input = ({ handleChange, label, autoFocus, handleClick }:Props) => ( <TextField onChange={handleChange} required label={label} autoFocus={autoFocus} onClick={handleClick} } /> );Estoy convirtiendo mis componentes de reacción en mecanografiado para el primero, estoy un poco confundido acerca de qué tipo debo escribir para las funciones que estoy recuperando, arriba del tipo Props iniciación, obtengo esa cadena y booleano, pero cómo alguien debería manejar la función de evento mecanografía
·
Juan Pablo Isaza
2 Respostas
Responde à pergunta0
Puede definir handleClick como React.MouseEventHandler<HTMLInputElement> :
import { TextField } from "@material-ui/core"; import React from "react"; type Props = { label: string; autoFocus?: boolean; handleClick?: React.MouseEventHandler<HTMLInputElement>; handleChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; }; const Input = ({ handleChange, label, autoFocus, handleClick }: Props) => ( <TextField onChange={handleChange} required label={label} autoFocus={autoFocus} onClick={handleClick} /> ); export default function App() { return <Input label="CustomInput" />; } 
·
Juan Pablo Isaza
Relatório
0
Como queremos usar MUI para admitir los tipos y ser una única fuente de verdad, sugiero inferir los tipos de la interfaz de usuario del material en sí, en lugar de crear tipos separados.
import { TextField, TextFieldProps } from '@mui/material'; type Props = { handleChange: TextFieldProps['onChange']; handleClick: TextFieldProps['onClick']; label: TextFieldProps['label']; autoFocus: TextFieldProps['autoFocus']; }; const Input = ({ handleChange, label, autoFocus, handleClick }: Props) => ( <TextField onChange={handleChange} required label={label} autoFocus={autoFocus} onClick={handleClick} /> );
·
Juan Pablo Isaza
Relatório
Responde à pergunta