打字稿输入 onchange event.target.value

通常事件处理程序应使用 e.currentTarget.value，例如：

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

您可以在此处阅读原因 (Revert "Make SyntheticEvent.target generic, not SyntheticEvent.currentTarget.")。

UPD：正如@roger-gusmao ChangeEvent 所述，更适合输入表单事件。

onChange = (e: React.ChangeEvent<HTMLInputElement>)=> {
   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} />
        ...
    );
  }

跟着完整的课，比较好理解：

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 { ChangeEvent } from 'react';

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

---

as HTMLInputElement 适合我

---

我们还可以使用定义类型（在功能组件中）的 onChange 事件触发，如下所示：

 const handleChange = (
    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
  ) => {
        const name = e.target.name;
        const value = 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>>;
}

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

<Input onChange={e => alert(e.target.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>
  );
}

---

使用子组件时我们像这样检查类型。

父组件：

export default () => {

  const onChangeHandler = ((e: React.ChangeEvent<HTMLInputElement>): void => {
    console.log(e.currentTarget.value)
  }

  return (
    <div>
      <Input onChange={onChangeHandler} />
    </div>
  );
}

子组件：

type Props = {
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export Input:React.FC<Props> ({onChange}) => (
  <input type="tex" onChange={onChange} />
)

---

尚未提及的替代方法是键入 onChange 函数而不是它接收的道具。使用 React.ChangeEventHandler：

const stateChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
    console.log(event.target.value);
};

---

这是使用 TS 3.3 测试的 ES6 对象解构方法。此示例用于文本输入。

name: string = '';

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

---

这是当您使用 FileList 对象时：

onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
  const fileListObj: FileList | null = event.target.files;
  if (Object.keys(fileListObj as Object).length > 3) {
    alert('Only three images pleaseeeee :)');
  } else {
    // Do something
  }

  return;
}}

---

谢谢@haind

是 HTMLInputElement 适用于输入字段

//Example
var elem = e.currentTarget as HTMLInputElement;
elem.setAttribute('my-attribute','my value');
elem.value='5';

这个 HTMLInputElement 是从 HTMLElement 继承的接口，而 HTMLElement 是从根级别的 EventTarget 继承的。因此，我们可以断言使用 as 运算符根据上下文使用特定接口，例如在这种情况下，我们将 HTMLInputElement 用于输入字段，其他接口可以是 HTMLButtonElement、HTMLImageElement 等。

https://i.stack.imgur.com/cp3xo.png

如需更多参考，您可以在此处查看其他可用接口

Mozilla 的 Web API 接口

Microsoft 外部节点模块中的接口

---

如果您这样做，则无需键入：

<input onChange={(event) => { setValue(e.target.value) }} />

因为如果你直接在 html 标签中用箭头函数设置一个新值，typescript 默认会理解事件的类型。

---

ChangeEvent<HTMLInputElement> 是 typescript 中更改事件的类型。就是这样完成的——

import { ChangeEvent } from 'react';

const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
};

---

  function handle_change(
    evt: React.ChangeEvent<HTMLInputElement>
  ): string {
    evt.persist(); // This is needed so you can actually get the currentTarget
    const inputValue = evt.currentTarget.value;

    return inputValue
  }

并确保您的 tsconfig 中有 "lib": ["dom"]。

---

这对我有用，它也与框架无关。

const handler = (evt: Event) => {
  console.log((evt.target as HTMLInputElement).value))
}

---

import { NativeSyntheticEvent, TextInputChangeEventData,} from 'react-native';



  // Todo in java script
 const onChangeTextPassword = (text : any) => {
    setPassword(text);
  }
    

// 类型脚本中的 Todo 使用 this

  const onChangeTextEmail = ({ nativeEvent: { text },}: NativeSyntheticEvent<TextInputChangeEventData>) => {
    console.log("________ onChangeTextEmail _________ "+ text);
    setEmailId(text);
  };


 <TextInput
          style={{ width: '100%', borderBottomWidth: 1, borderBottomColor: 'grey', height: 40, }}
          autoCapitalize="none"
          returnKeyType="next"
          maxLength={50}
          secureTextEntry={false}
          onChange={onChangeTextEmail}
          value={emailId}
          defaultValue={emailId}
          
        />

  

---