React native 如何在react native中从父组件访问子组件值？

我有一个具有以下结构的登录屏幕：

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>

从“../components/Logo”导入徽标
从“../components/Form”导入表单；
导出默认类登录名。组成部分{
...

这是我的表单组件：

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

导出默认类表单扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
用户名：“”，
密码：“”
} 
}
handleChangeUsername=（文本）=>{
this.setState（{username:text}）
}
handleChangePassword=（文本）=>{
this.setState（{password:text}）
}
render（）{
返回(
{this.username=input}
onChangeText={this.handleChangeUsername}
值={this.state.username}
/>
{this.password=input}
onChangeText={this.handleChangePassword}
值={this.state.password}
/>
{this.props.type}
);
}
}

现在我想在登录屏幕（父）中有一个checkLogin（）方法。 如何访问用户名和密码值以在登录屏幕中检查它们

---

如果有人能提供帮助，我将不胜感激。

您可以使用callback向家长发送用户名和密码，如以下示例代码所示：

表格：

登录：

添加两个名为user和pass的状态：

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

setUser=（文本）=>{
this.setState（{user:text}）
}
setPass=（文本）=>{
this.setState（{pass:text}）
}
checkLogin=（）=>{
//检查用户和传递状态。。。
}
{this.setUser（text）}
passChange={（文本）=>{this.setPass（文本）}
/>

现在，user和pass在login中处于状态，您可以检查它。

---

我希望这能帮助您

您可以使用回调将用户名和密码发送给家长，如以下示例代码：

表格：

登录：

添加两个名为user和pass的状态：

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

setUser=（文本）=>{
this.setState（{user:text}）
}
setPass=（文本）=>{
this.setState（{pass:text}）
}
checkLogin=（）=>{
//检查用户和传递状态。。。
}
{this.setUser（text）}
passChange={（文本）=>{this.setPass（文本）}
/>

现在，user和pass在login中处于状态，您可以检查它。

---

我希望这可以帮助您尝试使用

ref

关键字访问子值

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

---

尝试使用

ref

关键字访问子值

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

---

在父组件上设置类似于loginDetails={this.login}的属性，在子组件onChange中设置this.props.loginDetails（用户名、密码）；您将在login（）中获取数据…这是一种方法..在渲染时将父对象作为道具传递给子对象。在按下按钮时，在父组件上调用parent.checkLogin（this.state.username，this.state.password），设置类似于logindeails={this.login}的属性，并在子组件onChange中调用do this.props.logindeails（username，password）；您将在login（）中获取数据…这是一种方法..在渲染时将父对象作为道具传递给子对象。按下按钮，调用parent.checkLogin（this.state.username，this.state.password）