Reactjs 类型脚本输入onchange事件.target.value

在我的react和typescript应用程序中，我使用：

onChange={（e）=>data.monit=（e.target as any）.value}

如何正确定义类的类型，这样就不必使用

any

来破解类型系统

export interface InputProps extends React.HTMLProps<Input> {
...

}

export class Input extends React.Component<InputProps, {}> {
}

---

您试图在

InputProps

中添加的

target

与您想要的

React.FormEvent中的
target
不同

因此，我可以提出的解决方案是，扩展事件相关类型以添加目标类型，如下所示：

interface MyEventTarget extends EventTarget {
    value: string
}

interface MyFormEvent<T> extends React.FormEvent<T> {
    target: MyEventTarget
}

interface InputProps extends React.HTMLProps<Input> {
    onChange?: React.EventHandler<MyFormEvent<Input>>;
}

接口MyEventTarget扩展了EventTarget{
值：字符串
}
接口MyFormEvent扩展React.FormEvent{
靶点：髓鞘靶点
}
接口InputProps扩展React.HTMLProps{
onChange？：React.EventHandler；
}

一旦有了这些类，就可以将输入组件用作

<Input onChange={e => alert(e.target.value)} />

alert（e.target.value）}/>

没有编译错误。事实上，您也可以将上面的前两个接口用于其他组件。
您试图在
InputProps
中添加的
target
与
React.FormEvent
中所需的
target
不同

因此，我可以提出的解决方案是，扩展事件相关类型以添加目标类型，如下所示：

interface MyEventTarget extends EventTarget {
    value: string
}

interface MyFormEvent<T> extends React.FormEvent<T> {
    target: MyEventTarget
}

interface InputProps extends React.HTMLProps<Input> {
    onChange?: React.EventHandler<MyFormEvent<Input>>;
}

接口MyEventTarget扩展了EventTarget{
值：字符串
}
接口MyFormEvent扩展React.FormEvent{
靶点：髓鞘靶点
}
接口InputProps扩展React.HTMLProps{
onChange？：React.EventHandler；
}

一旦有了这些类，就可以将输入组件用作

<Input onChange={e => alert(e.target.value)} />

alert（e.target.value）}/>

没有编译错误。事实上，您也可以将上面的前两个接口用于其他组件。
因为HTMLInputElement
对我有效
因为HTMLInputElement
对我有效
通常事件处理程序应该使用
e.currentTarget.value
，例如：

onChange = (e: React.FormEvent<HTMLInputElement>) => {
    const newValue = e.currentTarget.value;
}

一般情况下，事件处理程序应使用
e.currentTarget.value
，例如：

onChange = (e: React.FormEvent<HTMLInputElement>) => {
    const newValue = e.currentTarget.value;
}

您可以执行以下操作：

import { ChangeEvent } from 'react';

const onChange = (e: ChangeEvent<HTMLInputElement>)=> {
   const newValue = e.target.value;
}

从'react'导入{ChangeEvent}；
const onChange=（e:ChangeEvent）=>{
const newValue=e.target.value；
}
您可以执行以下操作：

import { ChangeEvent } from 'react';

const onChange = (e: ChangeEvent<HTMLInputElement>)=> {
   const newValue = e.target.value;
}

从'react'导入{ChangeEvent}；
const onChange=（e:ChangeEvent）=>{
const newValue=e.target.value；
}
在TypeScript中使用的正确方法是

  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    // No longer need to cast to any - hooray for react!
    this.setState({temperature: e.target.value});
  }

  render() {
        ...
        <input value={temperature} onChange={this.handleChange} />
        ...
    );
  }

handleChange（e:React.ChangeEvent）{
//不再需要向任何人施放-万岁！
this.setState（{temperature:e.target.value}）；
}
render（）{
...
...
);
}

按照完整的课程，最好理解：

import * as React from "react";

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit'
};


interface TemperatureState {
   temperature: string;
}

interface TemperatureProps {
   scale: string;

}

class TemperatureInput extends React.Component<TemperatureProps, TemperatureState> {
  constructor(props: TemperatureProps) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  //  handleChange(e: { target: { value: string; }; }) {
  //    this.setState({temperature: e.target.value});  
  //  }


  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    // No longer need to cast to any - hooray for react!
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature} onChange={this.handleChange} />
      </fieldset>
    );
  }
}

export default TemperatureInput;

import*as React from“React”；
常量刻度线={
c:‘摄氏度’，
f:‘华氏’
};
界面温度{
温度：字符串；
}
接口温度程序{
刻度：字符串；
}
类TemperatureInput扩展了React.Component{
构造器（道具：TemperatureProps）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
this.state={温度：'}；
}
//handleChange（e:{target:{value:string；}；}）{
//this.setState（{temperature:e.target.value}）；
//  }
handleChange（e:React.ChangeEvent）{
//不再需要向任何人施放-万岁！
this.setState（{temperature:e.target.value}）；
}
render（）{
恒定温度=此.state.temperature；
const scale=this.props.scale；
返回(
在{scaleNames[scale]}中输入温度：
);
}
}
导出默认温度输入；
在TypeScript中使用的正确方法是

  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    // No longer need to cast to any - hooray for react!
    this.setState({temperature: e.target.value});
  }

  render() {
        ...
        <input value={temperature} onChange={this.handleChange} />
        ...
    );
  }

handleChange（e:React.ChangeEvent）{
//不再需要向任何人施放-万岁！
this.setState（{temperature:e.target.value}）；
}
render（）{
...
...
);
}

按照完整的课程，最好理解：

import * as React from "react";

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit'
};


interface TemperatureState {
   temperature: string;
}

interface TemperatureProps {
   scale: string;

}

class TemperatureInput extends React.Component<TemperatureProps, TemperatureState> {
  constructor(props: TemperatureProps) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  //  handleChange(e: { target: { value: string; }; }) {
  //    this.setState({temperature: e.target.value});  
  //  }


  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    // No longer need to cast to any - hooray for react!
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature} onChange={this.handleChange} />
      </fieldset>
    );
  }
}

export default TemperatureInput;

import*as React from“React”；
常量刻度线={
c:‘摄氏度’，
f:‘华氏’
};
界面温度{
温度：字符串；
}
接口温度程序{
刻度：字符串；
}
类TemperatureInput扩展了React.Component{
构造器（道具：TemperatureProps）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
this.state={温度：'}；
}
//handleChange（e:{target:{value:string；}；}）{
//this.setState（{temperature:e.target.value}）；
//  }
handleChange（e:React.ChangeEvent）{
//不再需要向任何人施放-万岁！
this.setState（{temperature:e.target.value}）；
}
render（）{
恒定温度=此.state.temperature；
const scale=this.props.scale；
返回(
在{scaleNames[scale]}中输入温度：
);
}
}
导出默认温度输入；
以下是一种ES6对象分解方法，使用TS 3.3进行了测试。

此示例用于文本输入

name: string = '';

private updateName({ target }: { target: HTMLInputElement }) {
    this.name = target.value;
}

以下是一种ES6对象分解方法，使用TS 3.3进行了测试。

此示例用于文本输入

name: string = '';

private updateName({ target }: { target: HTMLInputElement }) {
    this.name = target.value;
}

这是当您使用
文件列表
对象时：

onChange={（事件：React.ChangeEvent）：void=>{
const fileListObj:FileList | null=event.target.files；
if（Object.keys（fileListObj作为对象）.length>3）{
警报（‘请只显示三张图片’）；
}否则{
//做点什么
}
返回；
}}
这是当您使用
文件列表
对象时：

onChange={（事件：React.ChangeEvent）：void=>{
const fileListObj:FileList | null=event.target.files；
if（Object.keys（fileListObj作为对象）.length>3）{
警报（‘请只显示三张图片’）；
}否则{
//做点什么
}
返回；
}}
功能手柄的更改(
evt:React.ChangeEvent
)：字符串{
evt.persist（）；//这是必需的，这样您就可以实际获取currentTarget
常量输入值=evt.currentTarget.value；
返回输入值
}

和麦
import { ChangeEvent, useState } from 'react';


export const InputChange = () => {
  const [state, setState] = useState({ value: '' });

  const handleChange = (event: ChangeEvent<{ value: string }>) => {
    setState({ value: event?.currentTarget?.value });
  }
  return (
    <div>
      <input onChange={handleChange} />
      <p>{state?.value}</p>
    </div>
  );
}