親コンポーネントの子状態コンポーネント値を取得する

Question

私はchildrenDetailコンポーネントを持っています。それは、独自の状態を持っています。親のchildrenDetailコンポーネントは、forループを使用して複数回レンダリングします。私はクリックした保存ボタンの詳細kidsDetail情報のリストを取得したい。

ベローが、それは2人の状態の子供年齢と性別はとても親コンポーネントで取得します。この値が必要に

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

では、あなたは、単に渡すことができリアクトあり

 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 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> 
    } 
}