Reactjs React复选框事件和处理程序的类型脚本类型？

我正在构建类似于Typescript的东西。目标是让父组件具有一个状态，并创建几个无状态子组件，将其单击传递回父组件

因为这个例子是用Javascript编写的，所以我不知道输入框事件和onChange处理程序的类型是什么。。。？我尝试了几种选项，如

React.MouseEvent

，但那只是猜测

父组件 创建imageRows并传递处理程序：

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

---

当有疑问时，让它通过在位置上使用箭头来为您推断

答复 在您的情况下，

e

是

React.changevent

在我们的应用程序中

console.log（event.target.value）；//不工作（空白值）

console.log（event.target.checked）；//工作罚款（真/假）

/../src/components/testpage2/index.tsx
从“React”导入*作为React；
从“@c2/component library”导入{TestInput}；
导出默认类扩展React.Component{
状态={
型号：{
isUserLoggedIn：true
}            
};
onInputCheckboxChange=（事件：React.ChangeEvent）=>{
console.log（event.target.value）；//不工作
console.log（event.target.checked）；//正在工作
常量字段=event.target.name；
const model=this.state.model；
模型[字段]=event.target.checked；
返回此.setState（{model:model}）；
};
render（）{
返回(
);
}
}
//=============================================================//
从“React”导入*作为React；
//从“类名称”导入*作为cs；
导出接口TestInputProps扩展React.HTMLAttributes{
名称：字符串；
标签：字符串；
onChange:React.ChangeEventHandler；
占位符？：字符串；
值？：字符串；
类型？：字符串；
错误？：字符串；
类名？：字符串；
}
export const TestInput:React.SFC=（{name，label，onChange，placeholder，value，type，className，error，…rest}）=>{
让wrapperClass:string='FormGroup'；
if（error&&error.length>0）{
wrapperClass++=“有错误”；
}
返回(
{label}
{error&&{error}
);
}
TestInput.defaultProps={
键入：“文本”
}

Thank的可能副本。。。它显示了onChange（e:React.FormEvent）事件的类型。但我仍然无法在道具中找到更改处理程序的类型…似乎您正在使用过时的定义文件来进行响应？对于较新版本，它应该类似于类型“EventTarget&HTMLInputElement”上不存在的属性“value”。Hmmm版本似乎已锁定？如果我将其更新为

@types/react:“^15.6.1

，但在npm上，它说最新版本是

16.0.2

，可能您的react也没有更新？在任何情况下，如果您有旧版本的定义，请查看问题中的第二个答案，该答案标记为重复。我很肯定它会解决你的问题，请更新它，如果它对你有用，那么我将关闭这一个，因为它是重复的。这是我哭在感谢的一部分。不再需要通过不透明的文档进行挖掘。哦，非常感谢。这么简单的技巧和这么多小时的痛苦过去了：）太好了，谢谢：e.target.value==string和e.target.checked==boolean

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>
}

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

Property 'value' does not exist on type 'EventTarget'.

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