reactjs 消除函数的TypeScript错误

krugob8w  于 2023-03-17  发布在  React
关注(0)|答案(1)|浏览(138)

我有一个任务要实现select的“Clear”按钮,它将把select的值恢复为默认值。
代码如下所示

const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        onChange(e, e.target.value);
      };

      const handleClear = (e: React.ChangeEvent<HTMLSelectElement>) => {
        onChange(e, defaultValue);
      };

<>
          <select
            {...selectProps}
            value={value}
            ref={ref}
            disabled={isDisabled}
            onChange={handleChange}
          >
            {wrappedChildren()}
          </select>

          {isClearable && defaultValue && (
            <>
              <IconClear
                size="small"
                Icon={Close}
                onClick={handleClear}
              />
            </>
          )}
         </>

对于我得到的错误

Type '(e: React.ChangeEvent<HTMLSelectElement>) => void' is not assignable to type '(event: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>) => void'.

我理解对了吗,我需要为IconClear组件扩展onClick事件的接口,怎么做?

bvjxkvbb

bvjxkvbb1#

React.ChangeEvent<HTMLSelectElement>用于HTML <select>元素上的更改事件,而单击清除图标时,事件类型可以是React.MouseEventHandler<HTMLElement>

const handleClear = (e: React.MouseEvent<HTMLElement>) => {
  onChange(e, defaultValue);
};

相关问题