getElementById react-native

Question

How do you get elements in react-native?

My use-case is a login screen. the submit button is pressed and now i want to get the value of username and password 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>

          );
        }
      }

Answer 1

You don't have get getElementById in react native, you have to use state. you can do like this:

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

Answer 2

Handling events in React components is the most common case to use binding. But now in ES7 arrow function, you don't need to add this bind in your constructor:

Yeah I'm talking about the binding in the example above

this.login = this.login.bind(this);

In your constructor:

constructor (props) {
      super(props);
      this.state={
          email:'',
          password:''
      }
      this.login = this.login.bind(this);
  }

Imagine you have like 5 to 10 handlers, you are binding them like this each time you create a method.

With arrow function, you adopt the this binding of the enclosing scope. All you have to do to bind that method is:

Here is the syntax:

exampleMethod = () => {
  //this is bound to the class
}

In the example above, the login method will be:

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

You can also create simple bindings with apply/call in-line of the component event handlers, and avoid changing the this context by using an arrow function in render. An example will be

<MyButton onPress={() => this.login()} title='Login'/>

That's from the example above.