在父组件中获取子状态组件值

Question

我有 kidsDetail 组件，它有自己的状态，在父 kidsDetail 组件中使用 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

在 React 中，您可以简单地将处理程序传递给子组件，以便在子组件状态更新时调用，然后将子组件状态存储在父组件状态中。

检查以下代码：

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