상황
React에서 inputRef.current.focus()를 사용하는 상황이였다.
input태그에 focus를 주고싶은데 계속 적용이 안되는거였다.
이유는 바로 내가 input에다가 disabled속성을 넣었기 때문이다.
<TodoText
ref={inputRef}
value={todo.thing}
onChange={upDateHandler}
disabled={canEdit ? false : true}
edits={canEdit}
/>inputRef.current.focus()를해도 focus가 되질않는다.
disbled 속성을 사용한 이유는 state에 따라서 동적으로 input value를 onChange가능하게 못하게를 설정하고 싶었다.
내가 하고싶은 기능은 잘되나 disabled는 focus도 되질 않는다.
완전히 input의 모든 기능을 막는다 생각하면된다.
대신 readonly속성이 있다.
이속성은 말그대로 수정불가, 읽기만된다.
그리고 disabled와 달리 focus가 가능하다.
<TodoText
ref={inputRef}
value={todo.thing}
onChange={upDateHandler}
readOnly={canEdit ? false : true}
edits={canEdit}
/>이렇게 바꿨더니 바로 focus적용됨!
느낀점
- input에 수정을 막는방법으론 속성인 disabled와 readonly가있다.
- disabled는 focus가되질않고 readonly는 focus는된다.
