type="number" 在 onChange 中反应打字稿误报？答案

【问题标题】：type="number" react typescript false positive in onChange?type="number" 在 onChange 中反应打字稿误报？
【发布时间】：2019-12-10 03:08:39
【问题描述】：

第 24 行出现错误

“字符串”类型的参数不能分配给类型参数 'SetStateAction'.ts(2345)

使用打字稿进行反应实验。

const App: React.FC = () => {
  const [name, setName] = React.useState<string>(null);
  const [tel, setTel] = React.useState<number | undefined>(null);

  return (
    <div>
      <input
        value={name}
        type="text"
        placeholder="name"
        onChange={e => setName(e.target.value)}
      />
      <input
        value={tel}
        type="number"
        placeholder="tel."
        onChange={e => setTel(e.target.value)} // here?
      />
    </div>
  );
};

https://codesandbox.io/s/silly-moore-wve1p

type="text" 不会出现这种情况，我已经指定了类型，很奇怪。

【问题讨论】：

1) 所有与问题相关的信息都应尽可能包含在问题本身中。（欢迎使用补充链接。）错误信息是什么？ 2) supposed 的代码是做什么的？您沙箱中的代码与您的问题中的代码不匹配。
编辑了我的问题，我错过了。
@MellisaLee 看看你在 useState 中设置的类型，然后看看你在那里的初始值:)
啊！我明白你最初指的是什么。
是的@Jacob parseInt 工作。但是为什么需要第二个参数？我不明白为什么这里需要基数

标签： javascript reactjs typescript

【解决方案1】：

正如我在 cmets 中提到的，添加 parseInt() 以将事件中的 string 类型编号更改为数字将匹配您为该 useState 设置的类型

我还更改了useState's 的初始值以匹配它们定义的类型。

  const App: React.FC = () => {
  const [name, setName] = React.useState<string>('');
  const [tel, setTel] = React.useState<number | undefined>(undefined);

  return (
    <div>
      <input
        value={name}
        type="text"
        placeholder="name"
        onChange={e => setName(e.target.value)}
      />
      <input
        value={tel}
        type="number"
        placeholder="tel."
        onChange={e => setTel(parseInt(e.target.value))}
// setTel('12312')<string>  => setTel(parseInt('12312'))<number>
      />
    </div>
  );
};

【讨论】：