Отфильтруйте и строчные буквы всех символов, используя onKeyDown (ev: React.KeyboardEvent <HTMLElement>)

Question

Я использую TagPicker, в котором есть событие onKeyDown с подписью (ev: React.KeyboardEvent<HTMLElement>) => void

Можно ли использовать это событие, чтобы разрешить использование только строчных букв и символа тире -? В идеале я хотел бы автоматически преобразовывать заглавные буквы в строчные.

Answer 1

Я нашел решение для этого, TagPicker имеет атрибут inputProps, который позволяет подключаться к входным событиям.Как только я это выяснил, эта задача стала довольно простой:

 <TagPicker onResolveSuggestions={this.onResolveSuggestions}
    ..
    inputProps={{
        onBlur: () =>
            console.log("onBlur called"),
        onFocus: () =>
            console.log("onFocus called"),
        "aria-label": "Tag Picker",
        onKeyPress: (e) =>
        {
            var charInput = e.charCode;

            // no modifier key and no lowercase
            if(!e.ctrlKey && !e.metaKey && !e.altKey && 
                !(charInput >= 97 && charInput <= 122)) {

                //UPPERCASE => lowercase
                if((charInput >= 65) && (charInput <= 90)){
                    charInput=charInput+32;
                }

                //UNDERSCORE => dash
                if((charInput == 95)){
                    //DASH
                    charInput=45;
                }

                if((charInput >= 97 && charInput <= 122) || charInput == 45) { 

                    const start = e.currentTarget.selectionStart;
                    const end = e.currentTarget.selectionEnd;

                    const isPrevCharDash = (start > 0 && e.currentTarget.value.charAt(start-1) === "-");


                    if(!((start == 0 || isPrevCharDash) && charInput == 45)){
                        e.currentTarget.value = e.currentTarget.value.substring(0, start) + String.fromCharCode(charInput) + e.currentTarget.value.substring(end);
                        e.currentTarget.setSelectionRange(start+1, start+1);
                    }
                }

                e.preventDefault();
            }
        }
    }}
/>

Вот демо .