如何从文本输入（组件）获取值到我的主应用程序？

Question

我的主应用程序包含一个文本、一个文本输入（一个组件）和一个按钮（另一个组件）：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Alert } from 'react-native';
import { Tinput } from './components/Tinput.js';
import { Button } from './components/Button.js';

      export default function App() {
      return (
        <View style={styles.container}>
          <Text style={{fontSize:20, padding:20, textAlign:'center'}}>Ingrese un numero del pokémon a buscar!</Text>
          <Tinput/>
          <Button onPress={()=> ConsultarPokemon(/*this is where i want to insert the value from Tinput */)}> 
            Ingresar 
          </Button> 
          <StatusBar style="auto" />
        </View>
      );
    }

这是我的组件 Tinput，它有文本输入：

import React from 'react';
import { TextInput } from 'react-native';

const Tinput = () => {
  const [numero, setNumero] = React.useState('');

  return (
    <TextInput
      style={{ width:'90%', height: 50, borderColor: 'gray', borderWidth: 1, backgroundColor: '#fffff0', textAlign:'center', borderRadius: 20, borderWidth:5, margin:20}}
      onChangeText={(value) => setNumero({numero: value})}
      value={this.state.numero}
      maxLength={20}
    />
  );
}

export { Tinput };

我想在我的 onPress 函数上使用文本输入中的值，我尝试这样做但没有成功：

 <Button onPress={()=> ConsultarPokemon(Tinput.state.numero)}> 
        Ingresar 
 </Button> 

另外，我的 Tinput 组件有一个错误：undefined is not an object (evalating '_this.state.numero') 所以我可能也以错误的方式使用状态

Answer 1

只有当你创建了像组件类这样的类时，你才会使用 this.state.X，这里有一个例子：

    class Counter extends React.Component {
      constructor(props) {
        super(props);
        this.initialCount = props.initialCount || 0;
        this.state = {
          count: this.initialCount
        }
      }
increment() {
    this.setState({ count: this.state.count + 1 })
  }
  reset() {
    this.setState({ count: this.initialCount})
  }
  render() {
    const { count } = this.state;
    return (
      <>
        <button onClick={this.increment.bind(this)}>+1</button>
        <button onClick={this.reset.bind(this)}>Reset</button>
        <p>Count: {count}</p>
      </>
    );
  }
}

我建议不要把事情复杂化，直接在Tinput里面处理onPress

    const Tinput = () => {
      const [numero, setNumero] = React.useState('');
    
      return (
    <View>
        <TextInput
          style={{ width:'90%', height: 50, borderColor: 'gray', borderWidth: 1, backgroundColor: '#fffff0', textAlign:'center', borderRadius: 20, borderWidth:5, margin:20}}
          onChangeText={(value) => setNumero(value)}
          value={numero} // no need to use this.state.numero
          maxLength={20}
        />
 <Button onPress={()=> ConsultarPokemon(numero)}> 
        Ingresar 
  </Button> 
 </View>
      );
    }