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

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 (evaluating '_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>
      );
    }

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

How to get the value from a Text Input (a component) to my main app?

javascript

android

reactjs

react-native

native