onchange 不同的选择元素不同的结果答案

【问题标题】：onchange on different select element different resultonchange 不同的选择元素不同的结果
【发布时间】：2021-06-19 11:44:51
【问题描述】：

我是 react/typescript 世界的新手，我有两个 Select 元素，一个是正常的，另一个是 antd 版本，由于某种原因，在 antd 版本上 onchange 不会给出任何错误，但在普通版本上我收到此错误：

(JSX attribute) React.SelectHTMLAttributes<HTMLSelectElement>.onChange?: React.ChangeEventHandler<HTMLSelectElement> | undefined
Type '(customerId: string) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
  Types of parameters 'customerId' and 'event' are incompatible.
    Type 'ChangeEvent<HTMLSelectElement>' is not assignable to type 'string'.ts(2322)
index.d.ts(2274, 9): The expected type comes from property 'onChange' which is declared here on type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'

我的代码是这样的：

  <Select id="senderId" onChange={setSender}>
        {customerList.map((item, idx) => (
          <option key={idx} value={item.id}>
            {item.name}
          </option>
        ))}
      </Select>

只需将 Select 的首字母改为小写即可正常选择

【问题讨论】：

您好，显然您在 onChange 中的功能存在问题。你能在codeandbox.io或类似的地方分享一个你的组件的小例子吗？
正如我所说的它正在使用antd，但我想使用正常的选择，为什么要报错？
因为 antd 可以以不同的方式管理 onChange 事件。您需要使用事件参数处理 onChange 事件。 setSender = (event) => {event.target.value}
codepen.io/Cuchu/pen/xxgxZmo?editors=001 这是来自 antd。他们在 onChange 方法中使用了一个键。您需要在选择中使用不同的功能。并抓住事件而不是关键。

标签： javascript html reactjs typescript types

【解决方案1】：

在您的选择中，您需要使用不同的功能，因为 antd 在 onChange 事件中接收到一个键。 https://codepen.io/Cuchu/pen/xxgxZmo?editors=001

select组件的onChange事件使用一个事件作为参数。

setSender = (event) => {
    customerId = event.target.value;
    /* continue */
}

在此处查看控制台：https://codesandbox.io/s/frosty-breeze-4jlc7?file=/src/App.js

const setSender = (event) => { 
    /* I am not sure about this in typescript */
    if(event instanceof String) {
       customerId = event;
    } else {
       customerId = event.target.value;
    }
    /* customerId = event.target.value; */

    if (customerId === null || customerId === "") {
       setSelectedCustomerId(""); 
    } else {
       setSelectedCustomerId(customerId); 
    }
};

你的函数^^^

但不要复制和粘贴，检查和分析不同。 onChange 与 antd 接收一个字符串（选择键）。带有 select 的 onChange 接收事件。

最后的评论，我认为你需要使用{}

<select id="senderId" size={4} onChange={setSender}>

【讨论】：

如果不是太多，我的选择也有'size'属性，它有效但仍然给出：（JSX 属性）React.SelectHTMLAttributes.size?: number |未定义类型“字符串”不可分配给类型“数字”| undefined'.ts(2322) index.d.ts(2272, 9)：预期类型来自属性'size'，它在此处声明类型为'DetailedHTMLProps, HTMLSelectElement>'
更改select标签的函数名，因为and会失败。或者你可以检查参数的类型，直接使用customerId或者event。
您能否将其添加到您的答案中
是的，该错误是因为您使用的是字符串，并且 size 参数只接受数字或未定义。检查您是如何传递该属性的。
像这样：