javascript - react native - 如何将 TextInput 字段中的值放入 Text 字段
问题描述
我对本机反应非常陌生,我正在尝试查看是否可以在输入字段中输入字符串,然后按下按钮让它出现在其下方的文本字段中。
alert(this.state.PlaatsNaam)
我在功能结束时尝试过,在handleSearchButtonPress
按下第二个按钮后,它会显示带有之前给定输入的警报。
提前致谢!
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>
);
}
}
解决方案
如果它正确更新您的状态,您应该能够编写
<Text style={{ fontSize: 90, color: '#ECF0F1' }}>{this.state.PlaatsNaam}</Text>
我没有运行代码,但逻辑在那里
- 随着文本输入的变化更新临时状态
- 将临时状态复制到将在按钮单击时显示的字段
- 现在你只需要显示它
另外,setState
不保证状态会立即改变。这可能是让你被警报绊倒的原因。
推荐阅读
- sql - DB2 INSERT INTO ... 选择锁
- android - 更改数据后更新recyclerView
- node.js - 使用 HTML 代码检测屏幕上的图像大小
- php - 开关盒自动触发
- python - 虚拟子类有什么用?
- c# - 为什么我在 C# 中的 webrequest 代码中不断收到 401
- c++ - FFTW 高级接口:fftw_plan_many_r2r() 不起作用
- angular - Angular 5 数据可视化 - 仪表板框架
- python-3.x - 在 python3 中使用 u 前缀获取输出的好方法是什么
- .net - docker dotnet 镜像文件创建