javascript - React Native - 如何将 TextInput 字段中的值放入 Text 字段

Question

我对原生 react 很陌生，我正在尝试看看是否可以在输入字段中输入一个字符串，然后按下按钮让它出现在其下方的文本字段中。

我在handleSearchButtonPress函数末尾尝试了alert(this.state.PlaatsNaam)，在按下第二个按钮后，它显示了带有之前给定输入的警报.

提前致谢!

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button, TouchableOpacity, Image } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#405162',
    alignItems: 'center',
  },
  roundedButton: {
    borderRadius: 90,
  },
});

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      PlaatsNaam: '',
      PlaatsInput: '',
    };
  }

  handleSearchButtonPress = () => {
    this.setState({
      PlaatsNaam: this.state.PlaatsInput
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{ flexDirection: 'row', justifyContent: 'center', marginLeft: 60, marginRight: 60, marginTop: 50 }}>
          <TextInput value={this.state.PlaatsInput} onChangeText={(text) => this.setState({PlaatsInput: text})} autoCompleteType={"off"} style={{ flex: 4, textDecorationLine: 'none', color: '#ECF0F1', borderColor: 'white', borderBottomWidth: 1, marginBottom: 10 }} />
          <TouchableOpacity onPress={this.handleSearchButtonPress} style={{ borderTopEndRadius: 5, borderBottomRightRadius: 5, backgroundColor: '#16A085', height: 30, width: 40, alignItems: 'center' }}>
            <Icon color='#ECF0F1' size={20} name="search" style={{ textAlign: 'center', marginTop: 4 }} />
          </TouchableOpacity>
        </View>


        <View>
          <Text style={{ color: 'white', fontSize: 45, textAlign: 'center', marginTop: 20, marginBottom: 20 }}>{this.props.PlaatsInput}</Text>
        </View>


        <View style={{ alignItems: 'center' }}>
          <View style={{ borderTopLeftRadius: 25, borderTopRightRadius: 25, backgroundColor: "#2C3E50", width: 280, height: 180, alignItems: 'center' }}>
            <Text style={{ fontSize: 90, color: '#ECF0F1' }} > {this.props.Temp} </Text>
            <Text style={{ fontSize: 16, color: '#ECF0F1' }} > {this.props.MinMaxTemp} </Text>
            <Text style={{ fontSize: 16, color: '#ECF0F1' }} > {this.props.datum} </Text>
          </View>

          <View style={{ borderBottomLeftRadius: 25, borderBottomRightRadius: 25, backgroundColor: "#ECF0F1", width: 280, height: 240, alignItems: 'center', justifyContent: 'space-between' }}>
            <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 25 }} >{this.props.WindInfo}</Text>
            <Text style={{ fontSize: 20, textAlign: 'center' }} >{this.props.WeatherDetails}</Text>

            <View style={{ flexDirection: 'row', marginBottom: 25 }}>
              <Text style={{ fontSize: 20, marginRight: 50 }} >{this.props.SunriseTime}</Text>
              <Text style={{ fontSize: 20, marginLeft: 50 }} >{this.props.SunsetTime}</Text>
            </View>
          </View>
        </View>


        <View style={{ height: 70, width: 400, justifyContent: 'space-between', flexDirection: 'row', backgroundColor: '#ECF0F1', position: 'absolute', bottom: 0 }}>
          <TouchableOpacity style={{ backgroundColor: "#2C3E50", width: 98 }}><Icon color='#ECF0F1' size={60} name="home" style={{ textAlign: 'center', marginTop: 7 }} /></TouchableOpacity>
          <TouchableOpacity style={{ backgroundColor: "#2C3E50", width: 98 }}><Icon color='#ECF0F1' size={48} name="calendar-o" style={{ textAlign: 'center', marginTop: 10 }} /></TouchableOpacity>
          <TouchableOpacity style={{ backgroundColor: "#2C3E50", width: 98 }}><Icon color='#ECF0F1' size={48} name="calendar" style={{ textAlign: 'center', marginTop: 10 }} /></TouchableOpacity>
          <TouchableOpacity style={{ backgroundColor: "#2C3E50", width: 98 }}><Icon color='#ECF0F1' size={50} name="cog" style={{ textAlign: 'center', marginTop: 10 }} /></TouchableOpacity>
        </View>
      </View>
    );
  }
}

Answer 1

如果它正确更新您的状态，您应该能够编写

<Text style={{ fontSize: 90, color: '#ECF0F1' }}>{this.state.PlaatsNaam}</Text>

我没有运行代码，但逻辑就在那里

1. 随着文本输入的变化更新临时状态
2. 将临时状态复制到单击按钮时显示的字段
3. 现在您只需要显示它

此外，setState 并不保证状态会立即更改。这可能就是让您被警报绊倒的原因。