홈>
2 개의 화면이있는 간단한 앱을 작성하고 있습니다 : 로그인 및 메인. Login.js 파일에서 :
import React, {Component} from 'react';
import {Text, View, Button, StyleSheet, TextInput} from 'react-native';
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
user_name: '',
password: ''
};
}
render() {
return (
<View>
<Text>Username:</Text>
<TextInput
onChangeText={(text) => {
this.setState({user_name: text});
}}/>
<Text>Password:</Text>
<TextInput
secureTextEntry={true}
onChangeText={(text) => {
this.setState({password: text});
}}/>
<View style={styles.wrapper}>
<Button
onPress={this.props.click}
title="Login"
accessibilityLabel="Login to system"/>
</View>
</View>
);
}
}
Login.propType = {
user: React.PropTypes.string.isRequired,
pass: React.PropTypes.string.isRequired
}
const styles = StyleSheet.create({
wrapper: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around'
}
});
로그인이 성공했을 때 renderScene에 대한 Main.js가 있습니다. index.android.js 파일에서 AppRegistry에 대한 RouteTest 클래스를 선언합니다.
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
Alert,
Button
} from 'react-native';
import Main from './Screen/Main.js';
import Login from './Screen/Login.js';
class RouteTest extends Component {
renderScene(route, navigator) {
switch (route.name) {
case 'main':
return (<Main />);
case 'login':
return (<Login
click={()=>{
if(this.state.user_name == 'abc' && this.state.password == '123') {
navigator.push({name: 'main'})
} else {
Alert.alert("Login failed");
}
}}/>);
}
}
render() {
return (<Navigator
initialRoute={{
name: 'login'
}}
renderScene={this.renderScene}/>);
}
}
AppRegistry.registerComponent('RouteTest', () => RouteTest);
Login 클래스의 TextInput에서 user_name과 password를 얻으면 다음을 사용합니다. this.state.user_name하지만 작동하지 않습니다. 그리고 내 질문은 : RouteTest 클래스의 Login 클래스에서 사용자 입력 값을 얻는 방법입니다. 감사합니다.
-
답변 # 1
-
답변 # 2
https://facebook.github.io/react/docs/refs-and-the-dom.html을보십시오
기본적으로
props
에 액세스 할 수 있습니다 와이즈 비츠 당신의Login
에서 참조 설정 사용 (예 :RouteTest
그러면 다음과 같은 소품에 접근 할 수 있습니다 :
<Login ref={ref => this._login = ref} />
this._login.xxx
관련 자료
- javascript - react native의 스타일 구성 요소 - 소품을받지 못함
- 두 요소 React Native 사이의 거리를 어떻게 찾을 수 있습니까?
- React Native에서 구성 요소를 만드는 방법은 무엇입니까?
- React native flatlist - react 네이티브 플랫리스트 - 보낸 메시지와받은 메시지 구분
- javascript - 형제 컴포넌트간에 데이터를 전달하는 방법 React?
- javascript - BorderBottom이 뷰 상단에 React Native를 추가했습니다
- xcode - 코드 변경 후 React Native 063이 mainjsbundle을 업데이트하지 않음
- multipleselection - React Native의 목록에서 선택한 여러 항목을 표시하는 방법
- javascript - ReactJS를 사용하는 두 구성 요소 간의 통신
- Alertalert는 React 네이티브 iOS에서 작동하지 않지만 Android에서는 완벽하게 작동합니다
- React Native에서 컨텍스트에 액세스
- React Native로 CameraRoll iOS에서 오는 PHAsset의 경로 가져 오기
- javascript - 마커를 누르면 네이티브 맵이 다시 렌더링됩니다
- javascript - react native - selecteddaysincludes는 함수가 아닙니다
- React Native scroll to refresh가 페이지 매김에서 제대로 작동하지 않습니다
- reactjs - React Native에서 플랫리스트의 매개 변수 업데이트
- React Native의 3 개 버튼에서 하나의 버튼 선택
- React 네이티브 앱이 백그라운드에 있거나 장치가 잠금 상태 일 때 socketio가 연결 해제되는 것을 방지하는 방법은 무엇입니까?
- reactjs - 단일 함수를 버튼 클릭 한 후에 만 React Native에서 함수를 실행하려면 어떻게해야합니까?
- javascript - React Native에서 콘텐츠를 구성하는 방법을 모르겠습니다
트렌드
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- javascript - swiperjs에서 정지, 재생 버튼 추가
- vue.js - axios를 사용하여 서버에 이미지를 업로드하는 방법
- python - 문자열에서 특정 문자 제거
react redux를 사용하고 싶을 수도 있습니다. 이 u를 사용하면 어디서나 빠르고 간단하게 무엇이든 할 수 있습니다.
설정하기가 조금 어렵지만 일단 관리하기가 쉽고 앱의 어느 곳에서나 정보를 얻으려면 다음 링크를 참조하십시오 : Redux 시작하기
redux 사용의 다양한 측면을 다룹니다. 간단한 카운터 예부터 시작합니다. 또한 앱 어디에서나 결과에 액세스 할 수있는 API 호출을 관리하는 방법도 다룹니다.
업데이트: 훨씬 빠른 해결책은 React Context API를 사용하는 것입니다. 여기 실제적인 예가 있습니다. 완전한 상태 관리를 원한다면 대신 redux를 사용하십시오
행운을 빕니다!