javascript-使用reactjs和typescript的typesafe select onChange事件

我已经弄清楚了如何使用事件的丑陋转换将事件处理程序绑定到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>
        );
    }
}
davestevens asked 2020-02-15T02:35:52Z
9个解决方案
55 votes

由于将我的类型升级为反应0.14.43(我不确定确切的引入时间),因此React.FormEvent类型现在是通用的,这消除了强制转换的需要。

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<HTMLSelectElement>) {
        // No longer need to cast to any - hooray for react!
        var safeSearchTypeValue: string = event.currentTarget.value;

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

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

    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>
        );
    }
}
davestevens answered 2020-02-15T02:36:00Z
43 votes

我尝试使用React.FormEvent<HTMLSelectElement>,但即使在代码中看不到React.FormEvent,它也导致了编辑器错误:

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

然后,我将React.FormEvent更改为React.ChangeEvent,它有所帮助:

private changeName(event: React.ChangeEvent<HTMLSelectElement>) {
    event.preventDefault();
    this.props.actions.changeName(event.target.value);
}
Sergei Basharov answered 2020-02-15T02:36:29Z
11 votes

更新: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'
}

现场演示

TypeScript编译器将允许这种类型声明,因为HTMLSelectElement是EventTarget。 之后,它应该是类型安全的,因为您知道e.target是HTMLSelectElement,因为您刚刚将事件处理程序附加到了它。

但是,为了保证类型安全(在这种情况下,在重构时是相关的),还需要检查实际的运行时类型:

if (!(target instanceof HTMLSelectElement))
{
    throw new TypeError("Expected a HTMLSelectElement.");
}
John Weisz answered 2020-02-15T02:37:12Z
8 votes

最简单的方法是将类型添加到接收值的变量中,如下所示:

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

或者,您可以像下面这样投射EventTarget.value属性和.d.ts属性:

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

编辑:

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

全球公司

interface EventTarget {
    value: any;
}
thoughtrepo answered 2020-02-15T02:37:50Z
7 votes

有用:

type HtmlEvent = React.ChangeEvent<HTMLSelectElement>

const onChange: React.EventHandler<HtmlEvent> = 
   (event: HtmlEvent) => { 
       console.log(event.target.value) 
   }
Петр Графинов answered 2020-02-15T02:38:11Z
3 votes

据我所知,这目前是不可能的-始终需要强制转换。

为了使其成为可能,需要修改react的.d.ts,以便SELECT元素的onChange的签名使用新的SelectFormEvent。 新的事件类型将公开目标,该目标公开值。 然后,代码可以是类型安全的。

否则,总是需要对任何对象进行强制转换。

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

davestevens answered 2020-02-15T02:38:44Z
3 votes

JSX:

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

打字稿:

private handleFooChange = (event: React.FormEvent<HTMLSelectElement>) => {
    const element = event.target as HTMLSelectElement;
    this.setState({ foo: element.value });
}
Marco Lackovic answered 2020-02-15T02:39:08Z
1 votes

在我的情况下,onChange事件的类型为React.ChangeEvent:

onChange={ (e: React.ChangeEvent<HTMLSelectElement>) => {
           console.warn('onChange TextInput value: ' + e.target.value);
           } 
         }
Jackkobec answered 2020-02-15T02:39:28Z
0 votes

除了@thoughtrepo的答案:

在React中没有确定类型的事件之前,为输入控件提供特殊的目标接口可能会很有用:

export interface FormControlEventTarget extends EventTarget{
    value: string;
}

然后在您的代码中将其转换为这种类型,以适合于具有IntelliSense支持:

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

 (event.target as FormControlEventTarget).value;
Artru answered 2020-02-15T02:39:57Z
translate from https://stackoverflow.com:/questions/33256274/typesafe-select-onchange-event-using-reactjs-and-typescript