Как получить значение текста в состоянии. Когда я нажал на TouchableOpacity в реагировать родной?

Question

Как получить значение текста в состоянии. Когда я нажал на TouchableOpacity в реагирующем языке?

У меня есть значение пола в тексте TouchableOpacity. поэтому я хочу получить значение выбранного пола в состоянии, когда я нажал на TouchableOpacity.

Поэтому, пожалуйста, помогите мне, как я могу достичь этой функциональности. Спасибо за продвинутый уровень.

мой экран вы можете увидеть ниже.

Answer 1

Создайте функцию, подобную этой

setGender=(props)={
  this.setState({gender:props})
}

, вызовите эту функцию с помощью кнопки onPress, как это

 onPress={()=>this.setGender("Male")}
 onPress={()=>this.setGender("Female")

и отобразите значение состояния в тексте

Answer 2

Надеюсь, это поможет вам

import React, { Component } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';

export default class Home extends Component {
  state = {
    value: '',
  };

  onChangeValue = value => {
    if (value !== this.state.value) {
      this.setState({
        value: value,
      });
    }
  };

  render() {
    return (
      <View style={styles.container}>
        {this.state.value.length > 0 ? (
          <Text
            style={{
              fontSize: 40,
              alignSelf: 'center',
              justifyContent: 'center',
            }}>
            {this.state.value}
          </Text>
        ) : (
          <Text
            style={{
              fontSize: 40,
              alignSelf: 'center',
              justifyContent: 'center',
            }}>
            I identify as you
          </Text>
        )}
        <Button
          color="#000"
          title="Male"
          onPress={() => this.onChangeValue('male')}
        />
        <Button title="Female" onPress={() => this.onChangeValue('female')} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignContent: 'center',
    justifyContent: 'center',
  },
});

Не стесняйтесь дудтов.

Answer 3

надеюсь, это поможет вам

onPress = (Male) => {
       this.setState({ gender: 'Male'})
    }
    onPress1 = (Female) => {
       this.setState({ gender: 'Female'})
    }

         <TouchableOpacity
                 style={styles.button}
                 onPress={this.onPress(Male)}
               >
                 <Text> Male </Text>
               </TouchableOpacity>

             <TouchableOpacity
                 style={styles.button}
                 onPress={this.onPress1(Female)}
               >
                 <Text> Female </Text>
               </TouchableOpacity>*

Answer 4

Пример кодовой базы:

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity
} from "react-native";

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      gender: "",
      textGender:"Male"
    };
  }

  //Get text value
  getTextValue = () => {
    alert(this.state.gender);
    console.log("Selected Gender is ", this.state.gender);
    console.log("Selected Gender From Text ", this.state.textGender);
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          value={this.state.gender}
          keyboardType="default"
          onChangeText={gender => this.setState({ gender })}
        />

        <Text>{this.state.textGender}</Text>

        <TouchableOpacity
          onPress={() => this.getTextValue()}
        ></TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});