읽기, 재료 - UI 텍스트 필드에서 쉼표를 여러 글자로 구분할 수 있습니다.
1430 단어 React
하고 싶은 일
Material-UI를 바탕으로 텍스트를 입력하고 Tab를 누르면 Chip으로 텍스트를 등록합니다. 서브mit의 여러 글자를 사용할 수 있는 텍스트 필드를 원합니다.
이런
견본
코드박스 샘플을 줬어요. 터치해 주세요.
논리
materual-ui-chip-input라는 가장 좋은 라이브러리가 있기 때문에 사용하고 있습니다.
하는 일은 단지 이 위에 각양각색의props를 설치했을 뿐, 쉼표로 구분된 곳만 이벤트 처리 프로그램으로 제어하고 있다.
조건:
여러 개의 쉼표 구분자를 동시에 입력합니다.
쉼표 시작, 쉼표가 끝날 때 빈 배열에 로그인하지 마십시오.
중복 항목 등록 안 함
이런 느낌.
쉼표가 없으면 정상적으로 입력합니다.
이것은 활동 처리 프로그램입니다.
// Enable comma separation, Do not allow duplicates.
handleAddKeywords = (...chips) => {
const separetedChips = chips.shift().split(",");
const combinedChips = [...this.state.keywords, ...separetedChips];
const newKeywords = combinedChips.filter(
(v, i, self) => [...self, ...this.state.keywords].indexOf(v) === i && v
);
this.setState({ keywords: [...newKeywords] });
};
입력한 글자는 쉼표로 구분된다
입력된 배열 결합
반복 검사 및 비우기 검사
state에 설치
이런 절차.
spread operator가 많아서 이해하기 어렵지만 비교적 간단하게 이루어졌습니다.
Reference
이 문제에 관하여(읽기, 재료 - UI 텍스트 필드에서 쉼표를 여러 글자로 구분할 수 있습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tachibanayu24/items/df048e5889481bf14b81
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
코드박스 샘플을 줬어요. 터치해 주세요.
논리 materual-ui-chip-input라는 가장 좋은 라이브러리가 있기 때문에 사용하고 있습니다. 하는 일은 단지 이 위에 각양각색의props를 설치했을 뿐, 쉼표로 구분된 곳만 이벤트 처리 프로그램으로 제어하고 있다. 조건: 여러 개의 쉼표 구분자를 동시에 입력합니다. 쉼표 시작, 쉼표가 끝날 때 빈 배열에 로그인하지 마십시오. 중복 항목 등록 안 함 이런 느낌. 쉼표가 없으면 정상적으로 입력합니다. 이것은 활동 처리 프로그램입니다. // Enable comma separation, Do not allow duplicates. handleAddKeywords = (...chips) => { const separetedChips = chips.shift().split(","); const combinedChips = [...this.state.keywords, ...separetedChips]; const newKeywords = combinedChips.filter( (v, i, self) => [...self, ...this.state.keywords].indexOf(v) === i && v ); this.setState({ keywords: [...newKeywords] }); }; 입력한 글자는 쉼표로 구분된다 입력된 배열 결합 반복 검사 및 비우기 검사 state에 설치 이런 절차. spread operator가 많아서 이해하기 어렵지만 비교적 간단하게 이루어졌습니다.
Reference
이 문제에 관하여(읽기, 재료 - UI 텍스트 필드에서 쉼표를 여러 글자로 구분할 수 있습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tachibanayu24/items/df048e5889481bf14b81텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
