Question

我已经想出如何使用事件的丑陋演员来绑定SELECT元素上的事件处理程序。

是否可以以类型安全的方式检索值而无需转换为任何？

import React = require('react');

interface ITestState {
    selectedValue: string;
}

export class Test extends React.Component<{}, ITestState> {

    constructor() {
        super();
        this.state = { selectedValue: "A" };
    }

    change(event: React.FormEvent) {
        console.log("Test.change");
        console.log(event.target); // in chrome => <select class="form-control" id="searchType" data-reactid=".0.0.0.0.3.1">...</select>

        // Use cast to any works but is not type safe
        var unsafeSearchTypeValue = ((event.target) as any).value;

        console.log(unsafeSearchTypeValue); // in chrome => B

        this.setState({
            selectedValue: unsafeSearchTypeValue
        });
    }

    render() {
        return (
            <div>
                <label htmlFor="searchType">Safe</label>
                <select className="form-control" id="searchType" onChange={ e => this.change(e) } value={ this.state.selectedValue }>
                    <option value="A">A</option>
                    <option value="B">B</option>
                </select>
                <h1>{this.state.selectedValue}</h1>
            </div>
        );
    }
}

Answer 1

由于升级我的打字以反应0.14.43（我不确定这是什么时候引入），React.FormEvent类型现在是通用的，这就消除了对转换的需要。

$entry[14]

Answer 2

我尝试使用React.FormEvent<HTMLSelectElement>但导致编辑器出错，即使代码中没有EventTarget可见：

属性'value'在'EventTarget'
类型的值上不存在

然后我将React.FormEvent更改为React.ChangeEvent，这有助于：

private changeName(event: React.ChangeEvent<HTMLSelectElement>) {
    event.preventDefault();
    this.props.actions.changeName(event.target.value);
}

Answer 3

更新：React的官方类型定义已经将事件类型作为泛型类型包含了一段时间，所以现在你有完整的编译时检查，这个答案已经过时了。

是否可以以类型安全的方式检索值而无需转换为任何？

是。如果您确定您的处理程序所附加的元素，您可以执行以下操作：

<select onChange={ e => this.selectChangeHandler(e) }>
    ...
</select>

private selectChangeHandler(e: React.FormEvent)
{
    var target = e.target as HTMLSelectElement;
    var intval: number = target.value; // Error: 'string' not assignable to 'number'
}

Live demo

TypeScript编译器将允许此类型断言，因为 HTMLSelectElement 是 EventTarget 。之后，它应该是类型安全的，因为您知道 e.target 是 HTMLSelectElement ，因为您只是将事件处理程序附加到它。

但是，要保证类型安全（在这种情况下，在重构时相关），还需要检查实际的运行时类型：

if (!(target instanceof HTMLSelectElement))
{
    throw new TypeError("Expected a HTMLSelectElement.");
}

Answer 4

最简单的方法是向接收值的变量添加一个类型，如下所示：

var value: string = (event.target as any).value;

或者你可以像这样投射value属性以及event.target：

var value = ((event.target as any).value as string);

<强> 编辑：

最后，您可以在单独的EventTarget.value文件中定义.d.ts。但是，该类型必须与其他地方使用的类型兼容，并且您最终还是会再次使用any。

globals.d.ts

interface EventTarget {
    value: any;
}

Answer 5

它有效：

type HtmlEvent = React.ChangeEvent<HTMLSelectElement>

const onChange: React.EventHandler<HtmlEvent> = 
   (event: HtmlEvent) => { 
       console.log(event.target.value) 
   }

Answer 6

据我所知，目前这是不可能的 - 总是需要演员。

为了使其成为可能，需要修改反应的.d.ts，以便SELECT元素的onChange的签名使用新的SelectFormEvent。新事件类型将公开target，它会公开值。然后代码可以是类型安全的。

否则总是需要对任何人施展。

我可以将所有内容封装在MYSELECT标记中。

Answer 7

JSX ：

<select value={ this.state.foo } onChange={this.handleFooChange}>
    <option value="A">A</option>
    <option value="B">B</option>
</select>

TypeScript ：

private handleFooChange = (event: React.FormEvent<HTMLSelectElement>) => {
    const element = event.target as HTMLSelectElement;
    this.setState({ foo: element.value });
}

Answer 8

除了@ thoughtrepo的回答：

在React中没有明确的类型化事件之前，为输入控件设置一个特殊的目标接口可能很有用：

export interface FormControlEventTarget extends EventTarget{
    value: string;
}

然后在您的代码中转换为适合 IntelliSense 支持的此类型：

 import {FormControlEventTarget} from "your.helper.library"

 (event.target as FormControlEventTarget).value;

Answer 9

在我的情况下，onChange事件被键入为React.ChangeEvent：

onChange={ (e: React.ChangeEvent<HTMLSelectElement>) => {
           console.warn('onChange TextInput value: ' + e.target.value);
           } 
         }

typesafe使用reactjs和typescript选择onChange事件

9 个答案: