web-dev-qa-db-fra.com

Types de frappe pour React checkbox events and handlers?

Je construis quelque chose comme this React en TypeScript. Le but est d'avoir un parent qui a un état, et cela crée plusieurs composants enfants sans état qui passent leur clique sur le parent.

Étant donné que l'exemple est en Javascript, je n'ai aucune idée des types d'événements de la zone de saisie et des gestionnaires onChange ...? J'ai essayé plusieurs options comme React.MouseEvent<HTMLInputElement>, mais ce n'est qu'une conjecture ...

Composant parent créez des imageRows et passez le gestionnaire:

render() {
  <div>
    <ImageRow key={el.url} onChange={this.onChange}/>
  </div>
 }
 // what should the type of e be?
 onChange(e:any){
 }

Et le composant 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>
}

[~ # ~] modifier [~ # ~]

La question similaire montre uniquement le type d'événement, pas le type de gestionnaire. Lorsque je change le type d'événement:

onChange(e: React.FormEvent<HTMLInputElement>){
    console.log(e.target.value)
}

Je reçois cette erreur:

Property 'value' does not exist on type 'EventTarget'.
reactjstypescript
16
Kokodoko

En cas de doute, laissez-le vous déduire en utilisant une flèche en position, par ex.

enter image description here

Répondre

Dans votre cas, e est React.ChangeEvent<HTMLInputElement>.

39
basarat

Dans notre application,

console.log (event.target.value); // Ne fonctionne pas (valeur vide)

console.log (event.target.checked); // Fonctionne bien (vrai/faux)

//../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"
}
3
Thulasiram