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

当前回答

const handleChange = (
    e: ChangeEvent<HTMLInputElement>
  ) => {
    const { name, value } = e.target;
    this.setState({ ...currentState, [name]: value });
  };

您可以将此应用于表单组件中的每个输入元素

2022-11-24 19:04:30

其他回答

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

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

2022-09-20 16:41:06

你试图在InputProps中添加的目标和你想要在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>>;
}

有了这些类之后，就可以使用输入组件as了

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

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

2016-11-29 14:24:48

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

父组件:

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 handleChange = (
    e: ChangeEvent<HTMLInputElement>
  ) => {
    const { name, value } = e.target;
    this.setState({ ...currentState, [name]: value });
  };

您可以将此应用于表单组件中的每个输入元素

2022-11-24 19:04:30

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

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

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

2021-07-20 14:20:38

Typescript输入onchange event.target.value

推荐文章

最新文章

标签