如何获得状态文本的值。当我在react-native中单击TouchableOpacity时？

Question

如何在状态中获得文本值。当我在react-native中单击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,
  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
  }
});

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

随意随意。