Получение value от input'a REACT-NATIVE

166

15 апреля 2019, 22:00

Прошу не кидать камнями. Только начал изучение react-native и столкнулся с некоторой трудностью. Вот код:

import React from 'react';
import {
  Platform,
  StyleSheet,
  Text,TextInput,
  View,Image,Button,
} from 'react-native';
import { WebBrowser } from 'expo';
import { MonoText } from '../components/StyledText'
export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'First Page',
  };
  onPressMuiliply(){
    this.resultText.setState({
      textValue: "hello"
    })
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={{fontSize: 20}}>Enter 2 numbers:</Text>
        <Image style={{marginTop: 10, width: 50, height: 50}} source={{uri: 'http://download.seaicons.com/icons/icons8/windows-8/512/Science-Multiply-2-icon.png'}}/>
        <View style={{flexDirection:'row',marginTop: 10,marginBottom: 15}}>
          <TextInput name ='firstNumber' keyboardType='numeric' style={{borderWidth: 1, width: 100, marginRight: 5,textAlign: 'center'}}></TextInput>
          <TextInput name ='secondNumber' keyboardType='numeric' style={{borderWidth: 1, width: 100, marginLeft: 5,textAlign: 'center'}}></TextInput>
          <Text name='resultText'></Text>
        </View>
        <Button title="Multiply" onPress={this.onPressMuiliply}/>
    </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

(Это первая страница из 3 в navbar'e).
После нажатия на кнопку, функция должна брать значение у textInput'ов, умножать и выводить в конечное поле text. Умножение мне пока не нужно, лишь бы понять как взять значение и присвоить value поля. Ничего толкового не смог найти. help.

Answer 1

Как-то так:

class ... {
   value = '';
   render() {
     return(
       ...
       <TextInput defaultValue={this.value} onChangeText={value => this.value = value}>
       ...
     )
   }
}