如何在本机反应中获取子组件的状态

Question

I have Main Component file and use in another child component. I have to get state of the child component.

Ex :- Home (Parent) - Form (Child) component i have been set the value of any text box in state. So ho can i get the state value of Form component into the main component.

Answer 1

Pass the function as a prop to the child component

//Parent Component
export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
          username: '',
          password: '',
        };

        this._handleChange = this._handleChange.bind(this);
      }

      _handleChange(e) {
        const { name, value } = e.target;
        this.setState({
          [name]: value
        });
      }

      render(){   
         return(){
             <Form valueChange={this._handleChange} />
         }
      }       
}

//Child Component    
export default class Form extends Component {
render(){
   return(){
     <div>
       <input type="email" name="username" onChange={(e) => this.props.valueChange()} value={username}/>
        <input type="password" name="password" onChange={(e) => this.props.valueChange()} value={password}/>
    </div>
  }     
}

}

Answer 2

Generally in React (and React-Native) information is passed down from the parent component to its children. However if you need to change something in the parent component's state based on the child-component's state, you can pass a function to the child that does just that.

For example:

// Inside Parent Component
openModalFromParent() {
  this.setState({ modalOpened: true });
};

// Passing Function to Child
<ChildComponent openModal={ this.openModalFromParent } />

// Inside Child Component
<TouchableHighlight onPress={ () => this.props.openModal() } />

In this example the button in the child component would trigger a function that alters the state of the parent component - hope this helps!

Answer 3

In React, your state can only flow down from the parent to the children. What you should do is move the state from the child to the parent and then pass the state to the child as props.

Try reading this: https://reactjs.org/docs/lifting-state-up.html