0

I'm doing the ReactNative mobile app. WebApp runs smoothly and everything works. But when I transfer everything to the mobile part, I'm stuck with an error when I enter the text in input field. What I'm doing wrong and what is my mistake? Here is my code:

import React from 'react';
import { StyleSheet, TextInput, View } from 'react-native';

export default class App extends React.Component {

  state={
    message:"Hi {name}, your rating for this app is {rating}"
  }

    handleName=()=>{
      this.setState({
        message:"Hi "+this.refs.name.value+", your rating for this app is {rating}"
      })
    }

    handleRating=()=>{
      this.setState({
        message:"Hi "+this.refs.name.value+", your rating for this app is "+this.refs.rating.value
      })
    }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          placeholder="Your Name"
          ref="name"
          onChangeText={this.handleName}
        />
        <TextInput
          placeholder="Your Rating"
          ref="rating"
          onChangeText={this.handleRating}
        />
        <View>{this.state.message}</View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
Arina
  • 63
  • 3
  • 13

1 Answers1

1

I don't think that referring to the TextInput component like that (using a string reference) is the best way to achieve this. However, if you want to, you could use this.refs.name._lastNativeText to access the current value of the TextInput instead of this.refs.name.value.

In my opinion, a better way would be to use the value returned by onChangeText() callback. You could do that like this:

import React from 'react';
import { StyleSheet, TextInput, View } from 'react-native';

export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      name: null,
      rating: null,
      message: null,
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          placeholder="Your Name"
          onChangeText={text => this.setState({name: text})}
        />
        <TextInput
          placeholder="Your Rating"
          onChangeText={text => this.setState({rating: text})}
        />
        { this.state.name && this.state.rating &&
        <Text>Hi {this.state.name}, your rating for this app is {this.state.rating}.</Text>
        }
      </View>
    );
  }
}

I haven't tested this code, comment below if you face some error.

Uzair A.
  • 1,586
  • 2
  • 14
  • 30
  • What are the adverse effects of using` _lastNativeText` instead of a state prop? – FLash Feb 06 '20 at 12:10
  • There are no "adverse" effect per se, but the variables that start with an underscore character are usually meant for internal use only (i.e. for usage from within `TextInput` class itself, and not from anywhere outside it). Consult [this answer](https://stackoverflow.com/questions/8288756/in-javascript-what-does-this-underscore-mean) for more details. State props, on the other hand, and built for this purpose, and they are the recommended way in this scenario. – Uzair A. Feb 07 '20 at 04:54