CODEWITHSUNDEEP
react-native
tutiplain
tutiplain

Reputation: 1480

Cannot type anything in react native TextInput component

I am new to react-native. I am doing a simple salary calculator component for practice. I have two TextInput components, but I can't seem to type anything in them. Here is the code for my component:

class SueldoCalc extends Component {
  constructor(props)
  {
     super(props);
  }

 calcSalario()
 {
   console.log("Calculating");
 }

render() 
{
return (
  <View>
      <Text>Entre las horas trabajadas:</Text>
      <TextInput />
      <Text>Entre el rate por hora:</Text>
      <TextInput />
      <TouchableHighlight onPress={this.calcSalario}>
        <Text>Calcular salario...</Text>
      </TouchableHighlight>
  </View>
);

}

}

I tried subscribing to onTextChange events, but nothing. This is so basic, I can't find anything out there. Please help! I am running the app on Android Simulator for Visual Studio.

Upvotes: 4

Views: 11563

Answers (2)

majran
majran

Reputation: 469

I had the same problem both in Android and IOS. After I set width and height as the following (be careful both width and height must be set), the problem solved:

<TextInput style={{ height: 20, width: 100 }} />

Upvotes: 3

JFAP
JFAP

Reputation: 3717

You should specify onTextChange handler then set the state from there. Your <TextInput /> should have a value property:

<TextInput 
    value={this.state.horas}
    onChange={this._onChangeHandler}
/>

Upvotes: 1

Related Questions