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

Question

我目前正在构建一个包含<TextInput的组件，该组件捕获一个名为userInput的值。 我有一个<TouchableOpacity>然后调用一个在组件外部声明的 function，但是这个特定的 function 接受userInput作为它的 ZDBC11CAA5BDA99F77E6FB4DABD882E 之一。

我正在努力弄清楚如何在组件的 state 中使用分配给userInput的值，并将其传递给myFunction 。 这是否可能和/或有更好的方法来实现这一目标？

我确实尝试在组件内移动 function，但这会导致 function 出现错误。

任何帮助将不胜感激。

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 应该有一些子组件可以触摸。

举个例子：

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

我设法解决了将 function 声明移动到TouchableOpacity的onPress()的问题