Material UI Autocomplete: ‘Enter’ 이벤트 이외에 다른 이벤트에서 태그를 생성할 수 있을까요?
Material UI Autocomplete 컴포넌트를 사용하고 입력 텍스트 뒤에 쉼표나 공백이 따라올 때 태그를 생성해야하는 경우, Autocomplete는 Enter 이벤트만으로 태그를 생성한다는 것을 알 수 있습니다. 그러나 다른 이벤트에서 태그 생성을 지원하는 기능은 내장되어 있지 않습니다. 이 블로그 포스트에서는 다른 이벤트에서 태그 생성을 구현하는 가능한 방법을 살펴보겠습니다.
현재 접근 방식
현재는 Autocomplete에서 onInputChange 속성을 사용하여 입력된 문자열을 캡처하려고 시도하고 있습니다. 해당 문자열을 쉼표와 공백으로 확인하고, 해당 문자를 성공적으로 찾으면 일부 원시 JavaScript 코드를 사용하여 Enter 이벤트를 수동으로 발생시킵니다. 이 방식은 일부 경우에는 작동하지만 모든 시나리오에 대해 신뢰할 수 없는 문제가 있습니다. 또한 복잡성과 잠재적인 문제를 도입합니다. 더 나은 해결책을 살펴보겠습니다.
권장 접근 방식
권장되는 방식은 Autocomplete 컴포넌트에 “제어” 입력 접근 방식을 사용하는 것으로, 현재 값을 완전히 제어할 수 있습니다. 다음과 같은 작업을 수행할 수 있습니다.
1단계: 상태 초기화
태그 값을 추적하기 위해 초기 상태 변수를 초기화해야 합니다. 예를 들면 다음과 같습니다:
const [value, setValue] = React.useState([top100Films[13]]);
2단계: Keydown 이벤트 처리
다음으로, params.inputProps.onKeyDown을 통해 TextField 입력을 위한 onKeyDown 핸들러를 지정하세요. 이 핸들러는 쉼표나 공백이 눌릴 때 새로운 태그 값을 추가하는 역할을 담당합니다. 다음은 구현 예입니다:
const handleKeyDown = event => {
switch (event.key) {
case ",":
case " ": {
event.preventDefault();
event.stopPropagation();
if (event.target.value.length > 0) {
setValue([...value, event.target.value]);
}
break;
}
default:
}
};
3단계: Autocomplete 컴포넌트 구현
이제 Autocomplete 컴포넌트를 구현할 수 있습니다. value prop을 상태 변수로 설정하고 onChange를 통해 상태 값을 업데이트해야 합니다. 또한, filterSelectedOptions prop을 true로 설정하여 선택한 옵션을 필터링해야 합니다. 다음은 예시입니다:
<Autocomplete
multiple
freeSolo
id="tags-outlined"
options={top100Films}
getOptionLabel={option => option.title || option}
value={value}
onChange={(event, newValue) => setValue(newValue)}
filterSelectedOptions
renderInput={params => {
params.inputProps.onKeyDown = handleKeyDown;
return (
<TextField
{...params}
variant="outlined"
label="filterSelectedOptions"
placeholder="Favorites"
margin="normal"
fullWidth
/>
);
}}
/>
결론
제어 입력 접근 방식과 keydown 이벤트를 처리함으로써, Enter 키 입력 외에 다른 이벤트에서도 태그 생성을 가능하게 할 수 있습니다. 이 접근 방식은 Material UI Autocomplete 컴포넌트와 함께 작업할 때 더 많은 유연성과 신뢰성을 제공합니다. 특정 요구사항에 맞게 논리를 추가로 사용자 정의할 수 있습니다. 즐거운 코딩하세요!
Material UI Autocomplete 컴포넌트를 사용할 때 어떤 문제나 도전에 부딪혔습니까? 공유할 대체 접근 방식이 있습니까? 댓글에서 알려주세요.
