如何在React Native中获取textinput的文本？

Question

如何使用React语法（如ios中）编写此语句：

txt1.text = label.text 

我尝试了很多，但是失败了。

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

export default class App extends Component {
state = {
TextInputValue: '',
  };

onPress = () => {
this.setState({
  //textValue.Text: TextInputValue,
  //newText: textValue
});
  };

render() {
return (
  <View style={{ paddingTop: 25 }}>

    <TextInput
      style={{ height: 40 }}
      placeholder="Type here to! Translate"
      onChangeText={TextInputValue => this.setState({ TextInputValue })}
    />
    <Button title="Change Text" onPress={this.onPress} 
    />

    <Text>
      {this.state.newText}
    </Text>
  </View>
);
}
 }

按下按钮时，我要获取textinput的文本并将其显示在“文本（标签）”上

Answer 1

两个缺失的元素：

1. 在状态结构中定义newText。

state = {
  TextInputValue: '', // for onChangeText handler
  newText: '', // for button onClick handler
};

1. 实施按钮onClick处理程序可设置newText状态。

onPress = () => {
  this.setState({
    newText: this.state.TextInputValue,
  });
}

请参见Code Sandbox demo

Answer 2

您不必在输入按钮时更新状态，而是可以在输入时更新它，请检查下面的demo（我使用的是钩子，但对于常规状态却是相同的）：

import React, { useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export default () => {
  const [input, setInput] = useState('Default Text');

  return (
    <View style={styles.container}>
      <Text>{input}</Text>
      <TextInput
        style={styles.input}
        placeholder="Type here!"
        onChangeText={input => setInput(input)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
    alignItems: 'center',
  },
  input: {
    marginTop: '60%',
    height: 40,
    width: '80%',
  },
});