jyp
(네이티브학도)
12월 28, 2020, 9:48오전
1
const inputRef = useRef();
const onHandleSelect= ( data, e ) => {
inputRef.current.style = styleCommon.rb_menu_active;
}
< TouchableOpacity onPress={() => onHandleSelect(“국어”,“rb1”)}>
< Text ref={inputRef} style={styleCommon.rb_menu_inactive}>국어
</ TouchableOpacity>’
//css부분
export const styleCommon = StyleSheet.create({
rb_menu_active:{
marginRight:10,
width: 60,
height: 30,
backgroundColor: “#fe5746 ”,
textAlign: ‘center’,
fontSize: 20,
fontWeight: ‘bold’
},
})
위는 제가구현한 코드입니다 클릭시 text 색이 위에 지정한 색으로 바뀌어야하는데
inputRef지정한 text태그 css값이 바뀌지않고 반응이없습니다
혹시 제가 실수한게있을지…
react-native element의 스타일을 ref로 조작하는 방법은 바람직하지 않습니다. state를 이용하여 스타일을 조작하는 것을 추천드립니다
jyp
(네이티브학도)
12월 28, 2020, 10:34오전
3
역시 구글링해도 만족할만한 답을얻지 못했는데 이유가있었군요 감사합니다
ㅎㅎ
2020년 12월 28일 (월) 오후 7:19, chequerNoel via 자바스크립트 개발자 포럼 [email protected] 님이 작성:
OHHAKO
(hakokim)
1월 1, 2021, 6:32오후
4
ref로 스타일을 주는 경우에는 ref.current.style.display 처럼 주고자 하는 속성에 직접 접근하시면 스타일을 줄 수 있어요. 여기서 style 객체는 어떤 값을 바인딩하는게 아니라 read only에요.
예를들어 글자 색상을 바꿀때는 아래와 같이 작성합니다.
ref.current.style.color = “red”:
jyp
(네이티브학도)
1월 6, 2021, 8:13오전
5
ㅎㅎ 연초작업이바뻐서 늦게봤네요 말씀하신데로 ref로 직접 값을 주니 read only로 제어가안되더군요
그래서 useState 이용해서 true false값 여부로 판단해서 스타일주는방식으로 처리했습니다.
답변감사하고 새복많이 받으세요!
1개의 좋아요