Typescript输入onchange event.target.value

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

onChange={(e) => data.motto = (e.target as any).value}

我如何正确地定义类的类型，这样我就不必用任何类型系统来破解我的方法?

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'.

当前回答

下面是ES6对象解构的一种方法，用TS 3.3测试。这个例子是一个文本输入。

name: string = '';

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

2019-02-17 15:30:46

其他回答

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

父组件:

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

2020-07-19 03:27:36

const event = { target: { value: 'testing' } as HTMLInputElement };
handleChangeFunc(event as ChangeEvent<HTMLInputElement>);

这对我很有用。

2022-09-19 02:55:15

一般情况下，事件处理程序应该使用e. currentarget。值,例如:

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

你可以在这里读到为什么会这样(还原“Make SyntheticEvent。target generic，而不是syntheticevent . currentarget .")。

UPD:正如@roger-gusmao提到的，ChangeEvent更适合输入表单事件。

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

2017-03-07 10:24:56

我使用的方法是这样的:

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

2020-12-31 16:50:41

将字符串转换为数字简单答案

<input
    type="text"
    value={incrementAmount}
    onChange={(e) => {
      setIncrementAmmount(+e.target.value);
    }}
/>

2022-09-20 16:41:06

Typescript输入onchange event.target.value

推荐文章

最新文章

标签