React TypeScript：onChange 的正确类型

Posted 2023-02-22

【中文标题】React TypeScript：onChange 的正确类型

【英文标题】：React TypeScript: Correct Types for onChange

【发布时间】：2020-03-26 23:11:31

【问题描述】：

target: value: any, name: any 的正确类型是什么？我得到的错误是Duplicate identifier 'any'. 我也得到了错误Binding element 'any' implicitly has an 'any' type. 为什么value 给出错误'找不到名称'值'？'

我有一个code sandbox here

const [state, setState] = useState(
    fullName: '',
);

const  fullName  = state;

const onChange = ( target:  value: any, name: any  ) => 
    setState((prev) => (
        ...prev,
        [name] : value, // <= 'Cannot find name 'value'
    ));
;

...

<input
  type='text'
  placeholder='Full name'
  name='fullName'
  value=fullName
  onChange=onChange
/>

【问题讨论】：

另见：Typescript input onchange event.target.value

【参考方案1】：

来自onChange的event应该是ChangeEvent<htmlInputElement>

所以，你必须这样做：

const [fullName, setFullName] = useState('');

...

const onChange = (event: ChangeEvent<HTMLInputElement>) => 
    setFullName(event.currentTarget.value);
;

...

<input
  type='text'
  placeholder='Full name'
  name='fullName'
  value=fullName
  onChange=onChange
/>

【讨论】：

我应该像import React, ChangeEvent, useState from 'react';这样导入ChangeEvent吗

当我输入输入时，我可以输入 1 个字符，然后我不能再输入了

@Bill 是的，你应该从“react”导入 ChangeEvent；

@Bill 您可以在任何沙箱中发布您的代码示例吗？

@Bill 检查它codesandbox.io/s/nifty-field-om8d3 你必须调用 .persist 的事件因为reactjs.org/docs/events.html#event-pooling