React 复选框事件和处理程序的打字稿类型？

Posted 2023-02-22

【中文标题】React 复选框事件和处理程序的打字稿类型？

【英文标题】：Typescript types for React checkbox events and handlers?

【发布时间】：2018-01-21 17:47:47

【问题描述】：

我正在 Typescript 中构建类似 this React example 的东西。目标是让父级有状态，并创建几个无状态的子组件，将它们的点击传回父级。

由于示例是用 javascript 编写的，我不知道输入框事件和 onChange 处理程序的类型是什么......？我已经尝试了几个选项，比如React.MouseEvent<htmlInputElement>，但这只是猜测......

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

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

还有 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>

编辑

类似的问题只显示事件类型，而不是处理程序类型。当我更改事件类型时：

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

我收到此错误：

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

【问题讨论】：

Typescript: React event types的可能重复

谢谢...显示事件类型onChange(e: React.FormEvent<HTMLInputElement>)。但是在props中还是找不到change handler的类型...

似乎您正在使用过时的定义文件进行反应？对于较新的版本，它应该类似于Property 'value' does not exist on type 'EventTarget & HTMLInputElement'。

嗯版本好像被锁定了？如果我更新它仍然是 @types/react": "^15.6.1 但在 npm 上它说最新版本是 16.0.2

也许你的反应也没有更新？无论如何，如果您有旧版本的定义，请查看标记为重复的问题中的第二个答案。我很确定它会解决你的问题，如果它对你有用，请更新，所以我会关闭这个重复的

【参考方案1】：

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

回答

在您的情况下，e 是 React.ChangeEvent<HTMLInputElement>。

【讨论】：

这是我感激涕零的部分。不再通过不透明的文档进行疏浚。

哦，非常感谢。这么简单的把戏，这么多小时的痛苦就消失了:)

这应该是你第一次开始打字时学习的第一件事。在过去的几年里，这会为我节省很多时间。谢谢！

你在哪里看到这个秘密提示？据我所知，phpStorm 没有这样的选项。

【参考方案2】：

在我们的应用程序中，

console.log(event.target.value); // 不工作（空白值）

console.log(event.target.checked); // 工作正常（真/假）

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

【讨论】：

完美，谢谢：e.target.value == string 和 e.target.checked == boolean