2016-12-26 10 views
0

react-native의 요소를 어떻게 얻습니까?getElementById react-native

내 유스 케이스는 로그인 화면입니다. 제출 버튼을 누르면 이제는 사용자 이름과 암호 TextInputs의 값을 얻고 싶습니다.

 export default class Login extends Component 
     { 
     login() 
     { 
      //document.getElementById('username'); //run-time error 
     } 
     render() 
     { 
      return (

      <View style={{flex: 1,flexDirection: 'column',justifyContent: 'space-between',margin:10}}> 
       <View style={{backgroundColor: 'powderblue'}} /> 
       <MyTextField id='user' placeholder="User Name" /> 
       <MyTextField id='pass' placeholder="Password" /> 
       <MyButton onPress={this.login} title='Login'/> 
      </View> 

     ); 
     } 
     } 
+0

읽기 https://facebook.github.io/react/docs/forms.html –

답변

4

get nativeEnableById는 네이티브로 표시되지 않으므로 state를 사용해야합니다. 당신은 이렇게 할 수 있습니다 :

export default class Login extends Component { 

     constructor (props) { 
      super(props); 
      this.state={ 
       email:'', 
       password:'' 
      } 
      this.login = this.login.bind(this); // you need this to be able to access state from login 
     } 

     login() { 
      console.log('your email is', this.state.email); 
      console.log('your password is', this.state.password); 
     } 

     render() { 
      return (
      <View style={{flex: 1,flexDirection: 'column',justifyContent: 'space-between',margin:10}}> 
       <View style={{backgroundColor: 'powderblue'}} /> 
       <TextInput onChangeText={(email) => { 
      this.setState({email})/> 
       <TextInput secureTextEntry={true} onChangeText={(password) => { 
      this.setState({password})/> 
       <MyButton onPress={this.login} title='Login'/> 
      </View> 
     ); 
     } 
     } 
+0

감사합니다. 그것의 이상한 점은 값이 사용자 정의 컴포넌트 대신 부모에서 유지된다는 것입니다. 예를 들어 React는 '캡슐화'를 원하지 않습니다. 따라서 객체 지향이 아닙니다. 그렇다면 'Prop'으로 로그인과 '이름'을 전달해야한다고 생각합니다. 따라서 사용자 정의 TextInput에서 setState ({name : 텍스트})? – user1709076

+0

대단히 감사합니다. 당신은 나를 괴롭히는 데 도움이되었습니다. – user1709076

+0

예, 당신은 부모님을 정하며 자녀에게 패스 할 수 있습니다. – Codesingh