0
1.4K
Vistas¿Tipos de mecanografiado para eventos y controladores de casillas de verificación de React?
Estoy construyendo algo como este ejemplo de React en Typescript. El objetivo es tener un padre que tenga un estado, y crea varios componentes secundarios sin estado que devuelven sus clics al padre.
Dado que el ejemplo está en Javascript, no tengo idea de cuáles son los tipos de eventos del cuadro de entrada y los controladores onChange ...? Probé varias opciones como React.MouseEvent<HTMLInputElement> , pero eso son solo conjeturas...
El componente principal crea imageRows y pasa el controlador:
render() { <div> <ImageRow key={el.url} onChange={this.onChange}/> </div> } // what should the type of e be? onChange(e:any){ }Y el componente ImageRow
export interface ImageRowProps { genre: Array<number> url: string onChange : any // what is the type of the callback function? } export class ImageRow extends React.Component<ImageRowProps> { render() { return <div className="imagerow"> <input type="checkbox" key={index} onChange={this.props.onChange} defaultChecked={(num == 1)}/> </div> }EDITAR
La pregunta similar solo muestra el tipo de evento, no el tipo de controlador. Cuando cambio el tipo de evento:
onChange(e: React.FormEvent<HTMLInputElement>){ console.log(e.target.value) }me sale este error:
Property 'value' does not exist on type 'EventTarget'.2 Respuestas
Responde la pregunta0
En caso de duda, deje que lo deduzca por usted usando una flecha en la posición, por ejemplo
Responder
En su caso, e es React.ChangeEvent<HTMLInputElement> .
0
En nuestra aplicación,
consola.log(evento.objetivo.valor); // No funciona (Valor en blanco)
consola.log(evento.objetivo.marcado); // Funciona bien (verdadero/falso)
//../src/components/testpage2/index.tsx import * as React from 'react'; import { TestInput } from '@c2/component-library'; export default class extends React.Component<{}, {}> { state = { model: { isUserLoggedIn: true } }; onInputCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => { console.log(event.target.value); // Not Working console.log(event.target.checked); // Working const field = event.target.name; const model = this.state.model; model[field] = event.target.checked; return this.setState({model: model}); }; render() { return ( <div> <TestInput name="isUserLoggedIn" label="Is User LoggedIn : " type="checkbox" onChange={this.onInputCheckboxChange} /> </div> ); } } //=============================================================// import * as React from 'react'; //import * as cs from 'classnames'; export interface TestInputProps extends React.HTMLAttributes<HTMLInputElement> { name: string; label: string; onChange: React.ChangeEventHandler<HTMLInputElement>; placeholder?: string; value?: string; type?: string; error?: string; className?: string; } export const TestInput : React.SFC<TestInputProps> = ({ name, label, onChange, placeholder, value, type, className, error, ...rest }) => { let wrapperClass:string = 'form-group'; if (error && error.length > 0) { wrapperClass += " " + 'has-error'; } return ( <div className={wrapperClass}> <label htmlFor={name}>{label}</label> <div className="field"> <input type={type} name={name} className="form-control" placeholder={placeholder} value={value} onChange={onChange}/> {error && <div className="alert alert-danger">{error}</div>} </div> </div> ); } TestInput.defaultProps ={ type: "text" }