React-tags: V6

에 λ§Œλ“  2017λ…„ 11μ›” 14일  Β·  11μ½”λ©˜νŠΈ  Β·  좜처: i-like-robots/react-tags

이것은 V6 λ³€κ²½ 사항 및 버그 μˆ˜μ •μ„ μΆ”μ ν•˜λŠ” 포괄적인 λ¬Έμ œμž…λ‹ˆλ‹€.

  • [x] >= λ°˜μ‘ 16(#113)
  • [x] 11λ…„ λ™μ•ˆ autofocus μ˜΅μ…˜ 제거
  • [x] KeyboardEvent.key μ‚¬μš©ν•˜μ—¬ delimiters 및 delimiterChars μ˜΅μ…˜ 병합
  • [x] 이벀트 콜백의 이름을 handleX μ—μ„œ onX (#91)둜 λ°”κΏ”μ•Ό ν•©λ‹ˆλ‹€.
  • [x] handleInputChange 이름을 onInput λ°”κΏ”μ•Ό ν•©λ‹ˆλ‹€.
  • [x] listBoxId ꡬ성 κ°€λŠ₯
  • [x] ES6 λͺ¨λ“ˆ 지원, pkg.module (#112)
  • [x] μ΅œμƒμœ„ ꡬ성 μš”μ†Œλ‘œ 필터링 μ˜΅μ…˜ λ¦¬νŒ©ν„°λ§(#115)
  • [x] λͺ¨λ“  ν…μŠ€νŠΈλ₯Ό ꡬ성할 수 μžˆλ„λ‘ ν—ˆμš©(CC #154)
  • [x] 맞좀 μ œμ•ˆ κ΅¬μ„±μš”μ†Œ(CC #117)
  • [x] 각 prop λ³€κ²½ μ‹œ μƒˆ 객체λ₯Ό μƒμ„±ν•˜μ§€ μ•Šλ„λ‘ 클래슀 이름을 μƒνƒœμ—μ„œ λ¦¬νŒ©ν„°λ§(#147)
  • [x] clearInputOnDelete μ˜΅μ…˜μ„ μ œκ±°ν•˜κ³  νƒœκ·Έλ₯Ό μ‚­μ œν•  λ•Œ μž…λ ₯을 μ§€μš°μ§€ μ•ŠμŒ(#155)

λͺ¨λ“  11 λŒ“κΈ€

이거 μΆœμ‹œν•  κ³„νšμ΄ μžˆλ‚˜μš”?

μ‚¬μš©μž μ •μ˜ μ œμ•ˆ ꡬ성 μš”μ†Œλ₯Ό ν™œμš©ν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€! 6.0이 μΆœμ‹œλ˜λ‚˜μš”?

[email protected] 을 npm에 κ²Œμ‹œν–ˆμŠ΅λ‹ˆλ‹€. μ‹œλ„ν•΄ 보고 λ¬Έμ œκ°€ 있으면 μ•Œλ €μ£Όμ„Έμš”!

@i-like-robots Hooksλ₯Ό μ‚¬μš©ν•˜μ—¬ λ¦¬νŒ©ν† λ§ν•  κ³„νšμ΄ μžˆμŠ΅λ‹ˆκΉŒ? 예λ₯Ό λ“€μ–΄ μ‹œμž‘ν• κΉŒμš”?

@theJian 아직 μ•„λ‹™λ‹ˆλ‹€. 예제둜 μ‹œμž‘ν•˜λŠ” 것은 쒋은 μƒκ°μ²˜λŸΌ λ“€λ¦½λ‹ˆλ‹€.

이것을 μ–Έμ œ 톡합할 κ³„νšμž…λ‹ˆκΉŒ? :)

λΆˆν–‰νžˆλ„ 베타 λ¦΄λ¦¬μŠ€μ— λŒ€ν•œ ν”Όλ“œλ°±μ„ 받지 λͺ»ν–ˆκΈ° λ•Œλ¬Έμ— 릴리슀λ₯Ό κΊΌλ ΈμŠ΅λ‹ˆλ‹€. μ‹œλ„ν•΄λ³΄κ³  μ‹Άλ‹€λ©΄ 읽어보기 πŸ˜„μ— 지침이 μžˆμŠ΅λ‹ˆλ‹€.

https://github.com/i-like-robots/react-tags/tree/6.0#installation

λΉ λ₯Έ λ‹΅μž₯ κ°μ‚¬ν•©λ‹ˆλ‹€ πŸ‘ μ§€κΈˆ ν…ŒμŠ€νŠΈν•΄ λ³΄μ•˜λŠ”λ° 정말 잘 λ˜λ„€μš” πŸ˜„ λ§ˆμ΄κ·Έλ ˆμ΄μ…˜ 지침을 λ”°λžμŠ΅λ‹ˆλ‹€ πŸ₯‡

우리의 κ΅¬ν˜„μ€ μ΅œμ†Œν•œμž…λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ λ‚˜λŠ” 이것이 νš¨κ³Όκ°€ μžˆμŒμ„ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€ :)

Screen Shot 2019-08-23 at 1 23 08 PM

비동기 검색을 μ‚¬μš©ν•˜μ—¬ μ œμ•ˆμ„ κ°€μ Έμ˜€λ©΄ ꡬ성 μš”μ†Œκ°€ μ˜¬λ°”λ₯΄κ²Œ μž‘λ™ν•˜μ§€ μ•Šκ³  propsλ₯Ό 톡해 μ œκ³΅λ˜λŠ” μ œμ•ˆκ³Ό λ™κΈ°ν™”λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
μ½”λ“œμ—μ„œ λ‚΄λΆ€ μƒνƒœλ₯Ό μ—…λ°μ΄νŠΈν•˜κΈ° μœ„ν•΄ μ œμ•ˆμ—μ„œ λ³€κ²½ 사항을 μ‘°μ‚¬ν•˜μ§€ μ•ŠλŠ” 것 κ°™μŠ΅λ‹ˆλ‹€.

μΆ”μ‹ : "npm i react-tag-autocomplete"λ₯Ό μˆ˜ν–‰ν•  λ•Œ 베타 버전이 이제 κΈ°λ³Έ λ²„μ „μœΌλ‘œ μ„€μΉ˜λœ 것 κ°™μŠ΅λ‹ˆλ‹€. handleInputChangeκ°€ μž‘λ™ν•˜μ§€ μ•ŠλŠ” 이유λ₯Ό μ΄ν•΄ν•˜λŠ” 데 μ‹œκ°„μ΄ κ±Έλ ΈμŠ΅λ‹ˆλ‹€.

잘λͺ»λœ npm 배포 νƒœκ·Έ @coxom 에 λŒ€ν•΄ μ•Œλ €μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€. μ—¬κΈ° μ—μ„œ μˆ˜μ •λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

@coxom onInput 비동기 κ°€μ Έμ˜€κΈ°λ₯Ό ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€. @i-like-robots 이 λ²„κ·ΈμΈκ°€μš”?

onInput = (query) => {
            return fetch(`/search/?q=${query}`).then(result => result.json()).then((suggestions) => {
                        this.tagsRef.current.setState({ query, options: suggestions, suggestions });

νŽΈμ§‘: 일뢀 변경을 μˆ˜ν–‰ν•˜κ³  λ§ˆμΉ¨λ‚΄ μŠ€ν¬λ‘€λŸ¬κ°€ ν™œμ„±ν™”λ˜κ³  keyUP 및 Down 포컀슀 슀크둀러 μ΄λ™μœΌλ‘œ 더 큰 κ²°κ³Ό μ„ΈνŠΈμ— λŒ€ν•œ 지원을 μΆ”κ°€ν–ˆμŠ΅λ‹ˆλ‹€.
image

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰