Javascript react native-如何将文本输入字段中的值放入文本字段

我对react native非常陌生，我正在尝试查看是否可以在输入字段中输入一个字符串，然后按下按钮，让它出现在它下面的文本字段中

我尝试了

警报（this.state.PlaatsNaam）

在

handleSearchButton按下功能的末尾，在第二次按下按钮后，它会显示带有之前给定输入的警报

提前谢谢

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>
    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、文本输入、按钮、TouchableOpacity、图像}；
从“react native vector icons/Fontsome”导入图标
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#405162”，
对齐项目：“居中”，
},
圆形按钮：{
边界半径：90，
},
});
导出默认类Home扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
普拉特斯纳姆：，
PlaatsInput:“”，
};
}
HandleSearchButton按=（）=>{
这是我的国家({
PlaatsNaam:this.state.PlaatsInput
});
}
render（）{
返回(
this.setState（{PlaatsInput:text}）autoCompleteType={“off”}style={{{flex:4，textdocationline:'none'，color:'ECF0F1'，borderColor:'white'，borderBottomWidth:1，marginBottom:10}/>
{this.props.PlaatsInput}
{this.props.Temp}
{this.props.MinMaxTemp}
{this.props.datum}
{this.props.WindInfo}
{this.props.WeatherDetails}
{this.props.sunristime}
{this.props.SunsetTime}
);
}
}
如果它正确地更新了您的状态，您应该能够编写

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

{this.state.PlaatsNaam}

我没有运行代码，但逻辑是存在的

当文本输入更改时更新临时状态
将临时状态复制到将在单击按钮时显示的字段
现在您只需要显示它
另外，
setState
也不能保证状态会立即改变。这可能就是让你被警报绊倒的原因。
我就是这么做的，与警报不同，接收到的输入是在第一次按下按钮之后。非常感谢。