在父組件中獲取子狀態組件值

Question

我有kidsDetail組件它有它自己的狀態，在父組件childDetail組件中使用for循環呈現多個時間。我想要點擊保存按鈕，獲取詳細的kidsDetail信息列表。

貝婁父組件代碼

 renderKidsDetails(totalkids) { 
     /*If user selects 'yes' for kids, then this function is called 'n' 
     times; n = no. of kids */ 
     const kids= []; 
     if (this.state.addKidsDetails === true) { 
     for (let i = 0; i < totalkids; i++) { 
     kids.push(
     <RenderChildDetails key={i} ivalue={i + 1} /> 
    ); 
     } 

    } 
    return (
     <View style={{ marginLeft: 20 }}> 
     {kids} 
     </View> 
    ); 
     } 

KidsDetail.js它有兩個狀態的孩子年齡和性別等都需要這個值獲得檢索父組件

class RenderChildDetails extends Component { 
state={ 
    kidsAge: 0, 
    kidsGender: '', 
} 
constructor(props) { 
    super(props); 
    onClicked=this.onClicked; 
//Call function when the back button is pressed in the page header. 
    } 

onClicked=()=>{ 
console.log(" kid Age "+this.state.kidsAge); 
} 
render() 
    { 
    return(
    <View style={{flexDirection:'row',flex:1}}> 
    <View style={{backgroundColor:'black',height:20,width:20,borderRadius:10,margin:5,alignItems:'center', padding: 1}}> 
    <Text style={{color:'white'}}>{this.props.ivalue}</Text> 
</View> 
<TouchableOpacity onPress={() =>{ 

         ActionSheet.show(
          { 
          options: AGE, 
          cancelButtonIndex: CANCEL_INDEX, 
          destructiveButtonIndex: DESTRUCTIVE_INDEX, 
          title: "Select Age" 
          }, 
          buttonIndex => { 
          this.setState({ kidsAge: AGE[buttonIndex] }); 
          } 
         ) 

         } 
         }> 

    <View style={{flex:1,margin:5,flexDirection:'row'}} > 
    <Text>Age: {this.state.kidsAge}</Text> 
    <Image source={require('../../../Assets/Icons/Settings/Black_down.png')} 
      style={{height:11,width:11,margin:5}} /> 
    </View> 
    </TouchableOpacity> 
    <TouchableOpacity onPress={() => 
     ActionSheet.show(
         { 
          options: GENDER, 
          cancelButtonIndex: CANCEL_INDEX, 
          destructiveButtonIndex: DESTRUCTIVE_INDEX, 
          title: "Gender" 
         }, 
         buttonIndex => { 
             this.setState({ kidsGender: GENDER[buttonIndex] }); 
             } 
        )}> 
    <View style={{flex:1,margin:5,flexDirection:'row'}}> 
    <Text>Gender: {this.state.kidsGender}</Text> 
    <Image source={require('../../../Assets/Icons/Settings/Black_down.png')} 
      style={{height:11,width:11,margin:5}} /> 
    </View> 
    </TouchableOpacity> 
</View> 


); 

} 
} 

export default RenderChildDetails; 

Answer 1

在作出反應，你可以簡單地傳遞一個處理程序將在子組件狀態更新時調用子組件，然後將子組件狀態存儲在父組件狀態中。

檢查下面的代碼：

class Parent extends Component { 
    constructor(props) { 
     super(props) 
     this.state = {}; 
     this.handleChildUpdate = this.handleChildUpdate.bind(this); 
     this.getChildState = this.getChildState.bind(this); 
    } 


    //handler to update current parent state when child state is updated 
    handleChildUpdate(updatedState){ 
     this.setState({ 
     childState:updatedState 
     }); 
    } 

    //log updated child state on button click 
    getChildState(){ 
     console.log(this.state.childState.age); 
    } 

    render(){ 
     <View > 
     <Child handleUpdate={this.handleChildUpdate} /> 
     <Button onPress={this.getChildState}> 
     </View> 
    } 
} 


class Child extends Component { 
    constructor(props) { 
     super(props) 
     this.updateAge = this.updateAge.bind(this); 
     this.state = { 
      age:"10" 
     }; 
    } 


    updateAge(text){ 
     this.setState({ 
     age:text 
     } ,() => { 
     //this handler is passed as a prop from parent component 
     //this is how we update the parent state when any change happens to child state 
     this.props.handleUpdate(this.state); 
     }); 
    } 


    render(){ 
     <View > 
     <TextInput onChange={(text) => { this.updateAge(text) } } /> 
     </View> 
    } 
}