Material-ui: ์„ ํƒ ํ•„๋“œ์—์„œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์œผ๋กœ focus ()๋ฅผ ํŠธ๋ฆฌ๊ฑฐํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์— ๋งŒ๋“  2017๋…„ 11์›” 16์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: mui-org/material-ui


๋‚ด ์•ฑ ์–‘์‹์€ Enter ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์—ฌ 10 ํ‚ค ํ‚ค๋ณด๋“œ์˜ ์†๋„๋ฅผ ์œ„ํ•ด ์ง€์ •๋œ ํ•„๋“œ๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค. enter๊ฐ€ ์ ์ค‘๋˜๋ฉด DOM ์กฐํšŒ๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ณ  ๋‹ค์Œ ์š”์†Œ์—์„œ focus ()๋ฅผ ํŠธ๋ฆฌ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ํ…์ŠคํŠธ ํ•„๋“œ์—์„œ ์ž˜ ์ž‘๋™ํ•˜์ง€๋งŒ ์„ ํƒ ์ƒ์ž์—์„œ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. Select ๊ตฌ์กฐ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ฐ DOM ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์ง€๋งŒ ๋ชจ๋“  ์ˆ˜์ค€์—์„œ focus ()๋ฅผ ํŠธ๋ฆฌ๊ฑฐํ•˜๋ฉด ์•„๋ฌด ์ž‘์—…๋„ ์ˆ˜ํ–‰๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
์ฐธ๊ณ  : ์„ ํƒ ํ•ญ๋ชฉ์˜ inputRef๋ฅผ ํ†ตํ•ด ํ•ญ๋ชฉ์˜ ์ฐธ์กฐ๋ฅผ ๊ฐ€์ ธ ์™€์„œ DOM์„ ํƒ์ƒ‰ํ•˜์ง€ ๋ชปํ•˜๋„๋ก ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์—ฌ์ „ํžˆ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ค์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๋ชจ๋“  ์•ˆ๋‚ด์— ๋ฏธ๋ฆฌ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

  • [x]์ด ์ €์žฅ์†Œ์˜ ๋ฌธ์ œ ๋ฅผ ๊ฒ€์ƒ‰ํ–ˆ์œผ๋ฉฐ ์ด๊ฒƒ์ด ์ค‘๋ณต์ด ์•„๋‹ˆ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘


focus ()๊ฐ€ ์ˆ˜๋™์œผ๋กœ ํŠธ๋ฆฌ๊ฑฐ๋˜๋ฉด Select๊ฐ€ ํฌ์ปค์Šค (์—ด๋ฆฌ์ง€ ์•Š์Œ)๋ฉ๋‹ˆ๋‹ค. ํƒ€๊ฒฉ๊ณผ ๋™์ผํ•œ ํ–‰๋™์„ ๊ธฐ๋Œ€ํ•˜์‹ญ์‹œ์˜ค์•ž์˜ ์š”์†Œ์—.

ํ˜„์žฌ ํ–‰๋™


node.focus ()๋ฅผ ํŠธ๋ฆฌ๊ฑฐํ•˜๋Š” ๊ฒƒ์€ ์•„๋ฌด๊ฒƒ๋„ํ•˜์ง€ ์•Š์œผ๋ฉฐ, ์„ ํƒ DOM ๊ตฌ์กฐ ๋‚ด์˜ ์–ด๋–ค ์š”์†Œ์—์„œ๋„ ํŠธ๋ฆฌ๊ฑฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์žฌํ˜„ ๋‹จ๊ณ„ (๋ฒ„๊ทธ ์šฉ)


https://codesandbox.io/s/m43qqyo2zy

  1. ์ฒซ ๋ฒˆ์งธ ํ…์ŠคํŠธ ์ƒ์ž๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
  2. Enter ํ‚ค๋ฅผ ๋ˆ„๋ฅด์‹ญ์‹œ์˜ค.
  3. ๋‘ ๋ฒˆ์งธ ํ…์ŠคํŠธ ์ƒ์ž๋Š” FTW์— ์ดˆ์ ์ด ๋งž์ถฐ์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.
  4. Enter ํ‚ค๋ฅผ ๋‹ค์‹œ ๋ˆ„๋ฅด์‹ญ์‹œ์˜ค.
  5. ์•„๋ฌด ๋ฐ˜์‘์ด ์—†์Šต๋‹ˆ๋‹ค.

๋ฌธ๋งฅ

๋‹น์‹ ์˜ ํ™˜๊ฒฝ

| ๊ธฐ์ˆ  | ๋ฒ„์ „ |
| -------------- | --------- |
| Material-UI | 1.0.0- ๋ฒ ํƒ€ .21 |
| ๋ฐ˜์‘ | 16.1.0 |
| ๋ธŒ๋ผ์šฐ์ € | ํฌ๋กฌ 62 |
| ๊ธฐํƒ€ | |

question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋ˆ„๊ตฐ๊ฐ€ ๋น„์Šทํ•œ ๋ฌธ์ œ๋กœ ์—ฌ๊ธฐ์—์„œ ์šฐ์—ฐํžˆ ๋ฐœ๊ฒฌ ํ•œ ๊ฒฝ์šฐ : ์ด๊ฒƒ์€ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค : https://stackoverflow.com/questions/47353384/how-to-programmatically-trigger-focus-on-material-ui-select-field

๋ชจ๋“  3 ๋Œ“๊ธ€

@zachariahtimothy ๋‚˜๋Š” ์ด๊ฒƒ์ด MUI์˜ ๋ฌธ์ œ๋ผ๊ณ  ํ™•์‹ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์–‘์‹์„ ์ •๋ฆฌํ•ด์•ผ ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์งˆ๋ฌธ์€ Stack Overflow๋กœ ์ด๋™ํ•˜์„ธ์š”. ๊ฑด๋ฐฐ! ๐Ÿ˜„

@ m2mathew ๋‚˜๋Š” ๋‹น์‹ ์ด ๋งํ•˜๋Š” ๊ฒƒ์„
๋‚ด ๊ฒฌํ•ด๋Š” MUI์˜ ์„ ํƒ์ด ์ด๋ฒคํŠธ ์ธก๋ฉด์—์„œ ๊ธฐ๋ณธ ์–‘์‹ ์š”์†Œ๋กœ ์ฒ˜๋ฆฌ ํ•  ์ˆ˜์—†๋Š” ๊ฒฝ์šฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋ฌธ์ œ๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ž‘๋™ํ–ˆ๋˜ ๋„ค์ดํ‹ฐ๋ธŒ ํ”Œ๋ž˜๊ทธ๋กœ ์‹œ๋„ํ•ด ๋ณด์•˜์œผ๋ฏ€๋กœ ๋‚˜๋ฅผ ์–ป์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์žฌ์ •์˜ ๋œ ์„ ํƒ์ฒ˜๋Ÿผ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ์•„๋ฆ„๋‹ค์›€์ด ์—†์Šต๋‹ˆ๋‹ค :).
๋‹ต์žฅ๊ณผ ๋ฉ‹์ง„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

๋ˆ„๊ตฐ๊ฐ€ ๋น„์Šทํ•œ ๋ฌธ์ œ๋กœ ์—ฌ๊ธฐ์—์„œ ์šฐ์—ฐํžˆ ๋ฐœ๊ฒฌ ํ•œ ๊ฒฝ์šฐ : ์ด๊ฒƒ์€ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค : https://stackoverflow.com/questions/47353384/how-to-programmatically-trigger-focus-on-material-ui-select-field

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰