使用ReactJS和TypeScript创建类型安全的选择器onChange事件。

17 浏览
0 Comments

使用ReactJS和TypeScript创建类型安全的选择器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); // 在Chrome中 => 
        // 使用任意类型的转换可以工作，但不是类型安全的
        var unsafeSearchTypeValue = ((event.target) as any).value;
        console.log(unsafeSearchTypeValue); // 在Chrome中 => B
        this.setState({
            selectedValue: unsafeSearchTypeValue
        });
    }
    render() {
        return (
                
                
                
{this.state.selectedValue}

        );
    }
}

0

3 答案

0 Comments

自从我将typings升级到react 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) {
        // 不再需要转换为任意类型 - react太棒了！
        var safeSearchTypeValue: string = event.currentTarget.value;
        console.log(safeSearchTypeValue); // 在chrome中 => B
        this.setState({
            selectedValue: safeSearchTypeValue
        });
    }
    render() {
        return (
            

                
                
                
{this.state.selectedValue}

            

        );
    }
}

自2016年12月起，必须使用 event.currentTarget.value 来获取表单数据。

Dave，请考虑更新你的示例。

我已经编辑了以使用currentTarget，（joequery.me/code/event-target-vs-event-currenttarget-30-seconds是一个很好的解释）

0
0 Comments

问题的原因是在这个例子中，onChange事件的类型被定义为React.ChangeEvent<HTMLSelectElement>。这意味着当选择框的值发生变化时，事件对象e将包含一个target属性，它指向选择框的value属性。

解决方法是通过在onChange事件处理函数中添加类型注解来解决。在这个例子中，e的类型注解为React.ChangeEvent<HTMLSelectElement>，以确保事件对象的类型正确。

具体的解决方法如下所示：

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

通过将e的类型注解为React.ChangeEvent<HTMLSelectElement>，我们可以确保在事件处理函数中正确地访问选择框的value属性。

在这个例子中，我们使用了console.warn来输出选择框的值，你可以根据自己的需求来处理选择框的值。

在使用React和TypeScript开发时，为了确保类型安全，我们需要正确地定义事件的类型。通过在事件处理函数中添加类型注解，我们可以解决类型不匹配的问题，确保代码的正确性。

0
0 Comments

问题的原因是在使用React.FormEvent<HTMLSelectElement>时出现了错误，错误信息显示类型EventTarget上不存在属性'value'。然后，将React.FormEvent更改为React.ChangeEvent后，问题得到解决。现在可以成功访问event.target.value，它的类型被定义为string，所以根据具体情况可能需要进行双重类型转换。例如，event.target.value as unknown as number。

问题的解决方法是将React.FormEvent更改为React.ChangeEvent。这样做后，可以成功访问event.target.value属性，而不会出现错误。

0