๋ด ์ฑ ์์์ Enter ๋ฒํผ์ ์ฌ์ฉํ์ฌ 10 ํค ํค๋ณด๋์ ์๋๋ฅผ ์ํด ์ง์ ๋ ํ๋๋ก ์ด๋ํฉ๋๋ค. enter๊ฐ ์ ์ค๋๋ฉด DOM ์กฐํ๋ฅผ ์ํํ๊ณ ๋ค์ ์์์์ focus ()๋ฅผ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค. ์ด๊ฒ์ ํ
์คํธ ํ๋์์ ์ ์๋ํ์ง๋ง ์ ํ ์์์์์ด ์์
์ ์ํํ๋ ๋ฐฉ๋ฒ์ ์ดํดํ ์ ์์ต๋๋ค. Select ๊ตฌ์กฐ๋ฅผ ๊ตฌ์ฑํ๋ ๊ฐ DOM ์์๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ง๋ง ๋ชจ๋ ์์ค์์ focus ()๋ฅผ ํธ๋ฆฌ๊ฑฐํ๋ฉด ์๋ฌด ์์
๋ ์ํ๋์ง ์์ต๋๋ค.
์ฐธ๊ณ : ์ ํ ํญ๋ชฉ์ inputRef๋ฅผ ํตํด ํญ๋ชฉ์ ์ฐธ์กฐ๋ฅผ ๊ฐ์ ธ ์์ DOM์ ํ์ํ์ง ๋ชปํ๋๋ก ํ ์ ์์ง๋ง ์ฌ์ ํ ๊ฒฐ๊ณผ๊ฐ ๋์ค์ง ์์ต๋๋ค.
๋ชจ๋ ์๋ด์ ๋ฏธ๋ฆฌ ๊ฐ์ฌ๋๋ฆฝ๋๋ค!
focus ()๊ฐ ์๋์ผ๋ก ํธ๋ฆฌ๊ฑฐ๋๋ฉด Select๊ฐ ํฌ์ปค์ค (์ด๋ฆฌ์ง ์์)๋ฉ๋๋ค. ํ๊ฒฉ๊ณผ ๋์ผํ ํ๋์ ๊ธฐ๋ํ์ญ์์ค
node.focus ()๋ฅผ ํธ๋ฆฌ๊ฑฐํ๋ ๊ฒ์ ์๋ฌด๊ฒ๋ํ์ง ์์ผ๋ฉฐ, ์ ํ DOM ๊ตฌ์กฐ ๋ด์ ์ด๋ค ์์์์๋ ํธ๋ฆฌ๊ฑฐํ์ง ์์ต๋๋ค.
https://codesandbox.io/s/m43qqyo2zy
| ๊ธฐ์ | ๋ฒ์ |
| -------------- | --------- |
| Material-UI | 1.0.0- ๋ฒ ํ .21 |
| ๋ฐ์ | 16.1.0 |
| ๋ธ๋ผ์ฐ์ | ํฌ๋กฌ 62 |
| ๊ธฐํ | |
@zachariahtimothy ๋๋ ์ด๊ฒ์ด MUI์ ๋ฌธ์ ๋ผ๊ณ ํ์ ํ์ง ์์ต๋๋ค. ์์์ ์ ๋ฆฌํด์ผ ํ ๊ฒ ๊ฐ์ต๋๋ค. ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ ๋ฐฉ๋ฒ์ ๋ํ ์ง๋ฌธ์ Stack Overflow๋ก ์ด๋ํ์ธ์. ๊ฑด๋ฐฐ! ๐
@ m2mathew ๋๋ ๋น์ ์ด ๋งํ๋ ๊ฒ์
๋ด ๊ฒฌํด๋ MUI์ ์ ํ์ด ์ด๋ฒคํธ ์ธก๋ฉด์์ ๊ธฐ๋ณธ ์์ ์์๋ก ์ฒ๋ฆฌ ํ ์์๋ ๊ฒฝ์ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ฌธ์ ๊ฐ ๋ ์ ์๋ค๋ ๊ฒ์
๋๋ค. ๋๋ ์๋ํ๋ ๋ค์ดํฐ๋ธ ํ๋๊ทธ๋ก ์๋ํด ๋ณด์์ผ๋ฏ๋ก ๋๋ฅผ ์ป์ ๊ฒ์
๋๋ค. ์ฌ์ ์ ๋ ์ ํ์ฒ๋ผ ๋ด๊ฐ ์ํ๋ ์๋ฆ๋ค์์ด ์์ต๋๋ค :).
๋ต์ฅ๊ณผ ๋ฉ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค!
๋๊ตฐ๊ฐ ๋น์ทํ ๋ฌธ์ ๋ก ์ฌ๊ธฐ์์ ์ฐ์ฐํ ๋ฐ๊ฒฌ ํ ๊ฒฝ์ฐ : ์ด๊ฒ์ ์๋ํฉ๋๋ค : https://stackoverflow.com/questions/47353384/how-to-programmatically-trigger-focus-on-material-ui-select-field
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋๊ตฐ๊ฐ ๋น์ทํ ๋ฌธ์ ๋ก ์ฌ๊ธฐ์์ ์ฐ์ฐํ ๋ฐ๊ฒฌ ํ ๊ฒฝ์ฐ : ์ด๊ฒ์ ์๋ํฉ๋๋ค : https://stackoverflow.com/questions/47353384/how-to-programmatically-trigger-focus-on-material-ui-select-field