Question

在我的react和typescript应用程序中，我使用：onChange={(e) => data.motto = (e.target as any).value}。

如何正确定义班级的类型，所以我不需要使用any来破解类型系统？

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

}

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

如果我提出target: { value: string };，我会：

ERROR in [default] /react-onsenui.d.ts:87:18
Interface 'InputProps' incorrectly extends interface 'HTMLProps<Input>'.
  Types of property 'target' are incompatible.
    Type '{ value: string; }' is not assignable to type 'string'.

Answer 1

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

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

你可以在https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239

阅读原因

UPD：正如@ roger-gusmao所提到的ChangeEvent更适合打字表格活动。

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

Answer 2

在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;

Answer 3

as HTMLInputElement适合我

Answer 4

您尝试在SwipeView中添加的target与InputProps

中所需的target不一样

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

React.FormEvent

拥有这些课程后，您可以将输入组件用作

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>>;
}

没有编译错误。实际上，您也可以将上面的前两个接口用于其他组件。

Answer 5

我使用这样的东西：

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>
  );
}

Answer 6

在使用子组件时，我们检查此类。

父项：

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} />
)

Answer 7

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

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

Answer 8

幸运的是我找到了解决方案。你可以

从＆＃39; import＆＃39;;
中导入{ChangeEvent}

然后编写如下代码： e:ChangeEvent<HTMLInputElement>

Answer 9

感谢@haind

是HTMLInputElement在输入字段上工作

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

此HTMLInputElement的接口是从HTMLElement继承的，而EventTarget是在根级别上从as继承的。因此，我们可以断言使用HTMLInputElement运算符根据上下文使用特定的接口，例如在这种情况下，我们将HTMLButtonElement用于输入字段，其他接口可以是HTMLImageElement，function App() { const data = [ { "text" : '<p>This is a text</p>' }, { "text" : '<p style="color: red">Hello World</p>' }, ]; return ( <div> {data.map(item => <UnsafeComponent html={item.text} />)} </div> ); } function UnsafeComponent({ html }) { return <div dangerouslySetInnerHTML={{ __html: html }} />; } ReactDOM.render(<App />, document.getElementById('root'));等

有关更多参考，您可以在此处检查其他可用界面

Web API interfaces，由Mozilla
Interfaces in External Node Modules，由Microsoft

Answer 10

这是一种经过TS 3.3测试的ES6对象分解方法。
此示例用于文本输入。

name: string = '';

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

Answer 11

这是在使用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;
}}

Answer 12

  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
  }

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

Answer 13

如果你这样做，你不需要输入：

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

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

打字稿输入onchange event.target.value

13 个答案: