提交时通过props获取表单的详细信息答案

【问题标题】：get details of form through props when submitted提交时通过props获取表单的详细信息
【发布时间】：2018-11-23 16:19:19
【问题描述】：

我刚开始使用 react native 进行开发，我很难通过 props 获取输入字段的值。

父母

 class HomeContainerScreen extends Component {
         state = {
             userName:'',
             passWord:''
         }

     userLogin=()=>{
        alert(this.state.userName);
     }
  render() {
    return (
     <HomeScreen 
     userLogin = {this.userLogin} 
     userName = {this.state.userName} 
     passWord =  {this.state.passWord}
     />
    );
  }
}

export default HomeContainerScreen;

孩子

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image} from 'react-native';
import { Container, Content, Form, Input, Item, Label, Button} from 'native-base'
 class HomeScreen extends Component {
  render() {
    return (
     <Container>
         <Content contentContainerStyle={{alignItems:'center', justifyContent:'center',top:150}}>
             <Image style={{height:200, width:200, alignSelf:"center"}} source={require('../../assets/imgs/logo.jpg')}/>
         </Content>
         <Content>
          <Form>
            <Item stackedLabel>
              <Label>Username</Label>
              <Input onChangeText={(text=>this.setState({userName:this.props.userName}))}/>
            </Item>
            <Item stackedLabel last>
              <Label>Password</Label>
              <Input onChangeText={(text=>this.setState({passWord:this.props.passWord}))} />
            </Item>
            <Button 
                onPress={()=>this.props.userLogin()}
                style={{width:'80%', alignSelf:'center',margin:20}} iconLeft block>
                <Text style={{color:'white', fontSize:16}}>Sign In</Text>
            </Button>

          </Form>
        </Content>
     </Container>
    );
  }
}
export default HomeScreen

我已将其设置为在提交表单时获取值，但在提交时会发生任何事情。请提供有关如何使其工作的任何帮助。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

您正在设置子组件的状态，而不是父组件。您可以将另一个回调函数作为 prop 传递，以便对 this.setState 的调用发生在您的父组件中，而不是子组件中。

家长：

setUserName = (userName) => {
    this.setState({ userName: userName })
}
setPassWord= (passWord) => {
    this.setState({ passWord: passWord})
}

内部渲染（）：

<HomeScreen
    userLogin = {this.userLogin} 
    userName = {this.state.userName} 
    passWord =  {this.state.passWord}
    setUserName = {this.setUserName}
    setPassWord = {this.setPassWord}
/>

儿童：

<Input onChangeText={this.props.setUserName}/>
...
<Input onChangeText={this.props.setPassWord}/>

另外，这个对 setState 的调用：

this.setState({ userName: this.props.userName })

不会做太多，因为它只是将状态设置为与它已有的值相同的值。您可能希望将其设置为新值。

【讨论】：