如何在React Native中從父級訪問子級組件值？

Question

我有一個具有以下結構的登錄屏幕：

import Logo from '../components/Logo'
import Form from '../components/Form';

export default class Login extends React. Component {
  <View style={styles.container} >
    <Logo/>
    <Form type="login"/>
    <View style={styles.signUpTextCont}>
      ...
    </View>
  </View>

這是我的表單組件：

export default class Form extends React.Component {
constructor (props){
 super(props)
  this.state = {
  username : '',
  password : ''
 } 
}
handleChangeUsername = (text) => {
 this.setState({ username: text })
}
handleChangePassword = (text) => {
this.setState({ password: text })
}
render() {
 return (
  <View style={styles.container} >
  <TextInput
    ref={(input) => { this.username = input }}
    onChangeText = {this.handleChangeUsername}
    value = {this.state.username} 
    />

  <TextInput 
    ref={(input) => { this.password = input }}
    onChangeText = {this.handleChangePassword}
    value = {this.state.password}
    />
     <TouchableOpacity style={styles.button}>
         <Text style={styles.buttonText}>{this.props.type}</Text>

    </TouchableOpacity>
  </View>
  );
  }
 }

現在，我想在“登錄”屏幕（父級）中使用一個checkLogin（）方法。 如何在登錄屏幕中訪問用戶名和密碼值以進行檢查？

如果有人可以幫助，我將不勝感激。

Answer 1

嘗試使用ref關鍵字訪問子值。

<View style={styles.container} >
    <Logo/>
    <Form type="login"
      ref={'login'}/>
    <View style={styles.signUpTextCont}>
      ...
    </View>
  </View>

要訪問父級中的子組件值：

    onClick = () =>{
      //you can access properties on child component by following style:
      let userName = this.refs['login'].state.username;
      let password = this.refs['login'].state.password;
    }

Answer 2

您可以使用回調將用戶名和密碼發送給父級，例如以下示例代碼：

形成：

handleChangeUsername = (text) => {
   this.setState({ username: text })
   this.props.userChange(text)
}
handleChangePassword = (text) => {
    this.setState({ password: text })
    this.props.passChange(text)
}

登錄：

添加兩個名為user的狀態並通過和：

setUser = (text) => {
    this.setState({user:text})
}
setPass = (text) => {
    this.setState({pass:text})
}

checkLogin = () => {
    // check user and pass state...
}

<Form 
    type="login"
    userChange = {(text) => { this.setUser(text) } }
    passChange = {(text) => { this.setPass(text) } }
/>

現在，用戶和通行證處於登錄狀態，您可以對其進行檢查。 希望對您有所幫助