使用ant的select的onInputKeyDown

前提

希望输入重复的tag并且回车时，外围框变红

遇到困难

发现在禁用下拉时，当输入已有tag时，内部自动禁止生成tag，直接导致onchange事件失效

解决

const onInputKeyDown = (e: { key: string; target: { value: string } }) => {
        const tempVal = e.target.value;
        if (e.key == 'Enter') {
            const isRepeat = keywords.indexOf(tempVal);
            isRepeat > -1 ? setRedBorder(true) : setRedBorder(false);
        }
    };
<Select
    className={cls(styles.keywordsSelector, { [styles.redBorder]: redBorder })}
    dropdownStyle={{ display: 'none' }}
    mode="tags"
    showArrow={false}
    value={keywords}
    getPopupContainer={((triggerNode: any) => triggerNode.parentElement) as any}
    onChange={(e: string[], option) => onChangeKeywords(e)}
    onInputKeyDown={onInputKeyDown}
/>

使用onInputKeyDown方法，e的keyCode是undefined的，只有e的key可以返回，并且是直接返回键盘名称，而不是数字序号

比如敲击回车，即返回 ‘Enter’

总结

webAPI上的 code 是一直是undefined的， 而key 确是好用的