사용자 지정 구성 요소에 대한 참조 추가

Question

react-native-elements 라이브러리를 참조하고 해당 확인란 구성 요소를 사용합니다.

constructor(props) { 
    super(props); 
    this.state = { 
     checked: true 
     titleText1:"Checkbox one" 
     titleText1:"Checkbox two" 
    } 
    } 
    render() 
    { 
    return (
      <View> 
    <CheckBox ref='chk1' checked={this.state.checked} title={this.state.titleText1} /> 
    <CheckBox ref='chk2' checked={this.state.checked} title={this.state.titleText2} onPress={this.manageChkboxes()} /> 
      </View>); 
} 

    manageChkboxes(){ 
    this.state.checked=false 
    this.state.titleText1="Checkbox one updated" 
    this.state.titleText2= "Checkbox two updated" 
    this.refs.chk1.checked= this.state.checked; 
    this.refs.chk1.title= this.state.titleText1; 
    this.refs.chk2.checked= this.state.checked; 
    this.refs.chk2.title= this.state.titleText2; 
    } 

참조를 사용하여 구성 요소 속성을 수정할 수 없습니다. manageChkboxes() 함수를 호출하면 오류가 발생합니다. null is not an object(evaluating 'this.refs.chk1.checked=!1')

Answer 1

소품에 액세스하려면 약간 변경해야합니다. 그러나 당신은 또한 직접 상태를 변경하지 않을, 심판에 대한 문자열을 사용하지 않아야합니다, 항상 setState를 사용 또한

constructor(props) { 
    super(props); 
    this.state = { 
     checked: true 
     titleText1:"Checkbox one" 
     titleText1:"Checkbox two" 
    } 
    } 

    manageChkboxes(){ 
    this.setState({ 
    checked: false, 
    titleText1: "Checkbox one updated" 
)}; 
    } 

render(){ 
    return(
    <View> 
     <CheckBox checked={this.state.checked} title={this.state.titleText1} /> 
     <CheckBox checked={this.state.checked} title={this.state.titleText2} onPress={this.manageChkboxes()} /> 
    </View> 
) 
}