React Native：从<textinput>进入在组件外部声明的 function</textinput>

Question

I am currently building a component that includes a <TextInput which captures a value called userInput . I have a <TouchableOpacity> which then invokes a function which is declared outside of the component, however this particular function accepts the userInput as one of it's arguments.

I am struggling to figure out how to use the value assigned to userInput in the component's state, and pass it to myFunction . Is this possible and/or is there a better way to achieve this?

I did try moving the function inside the component, however this caused errors with the function.

Any help would be very much appreciated.

import React, {Component} from 'react';
import {Text, View} from 'react-native';
import {TextInput} from 'react-native-gesture-handler';

const myFunction = () => {
  func()
    .then(async user => {
      const userInput = this.state.userInput;
      await addToProfile(user, userInput);
    })
    .catch(err => {
      console.error(err);
    });
};

export default class Stackoverflow extends Component {
  state = {
    userInput: '',
  };
  constructor(props) {
    super(props);
    this.textInputComponent = React.createRef();
  }
  render() {
    return (
      <View>
        <TextInput
          ref={this.textInputComponent}
          keyboardAppearance={'dark'}
          value={this.state.userInput}
          onChangeText={value => this.setState({userInput: value})}
        />
        <TouchableOpacity
          onPress={() => {
            myFunction();
          }}
        />
      </View>
    );
  }
}

Answer 1

TouchableOpacity should have some child component within it to touch.

Lets take an example:

const callme= () => {
  console.log("Pressed event called.....");
};

const mycomponent = () => {
  return (
    <TouchableItem
      onPress={() => {
        callme();
      }}
      useOpacity
    >
      <View style={[styles.container]}>
        <Text style={[styles.mytextstyle}>Some title here</Text>
      </View>
    </TouchableItem>
  );
};

Answer 2

I managed to solve the issue my moving the function declaration into the onPress() of the TouchableOpacity