提交时通过道具获取表格的详细信息
提交时通过道具获取表格的详细信息
提问于 2018-11-23 16:19:19
我刚开始使用react本地程序进行开发，我很难通过道具获得输入字段的值。
父级
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我将其设置为在提交表单时获得值，但在提交时会发生任何事情。请在如何使它工作方面有任何帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-23 16:46:14
您正在设置子组件的状态，而不是父组件的状态。您可以传递另一个回调函数作为支柱，这样对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}
/>和in child:
<Input onChangeText={this.props.setUserName}/>
...
<Input onChangeText={this.props.setPassWord}/>此外，这个对setState的调用：
this.setState({ userName: this.props.userName })不会做太多事情，因为它只是将状态设置为与它已经拥有的值相同的值。您可能希望将其设置为新值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53450001
复制相关文章
相似问题
腾讯云开发者
