点击按钮和占位符时对输入的本地更新值作出反应

Question

我正在尝试通过单击按钮获取纬度和经度，并将其设置为TextInput。以下代码的问题是占位符总是未定义。

我尝试删除value属性，在这种情况下占位符是可见的，但我无法设置位置。如何使占位符可见，直到获取位置，然后在获取位置后将值设置为纬度。

我想我没有正确使用setLatLong。我们可以使用useRef来正确设置值吗。

<TextInput
style={{
borderBottomColor: "black",
borderBottomWidth: 2,
color: "black",
}}
placeholder={"Longitude"}
placeholderTextColor="blue"
editable={false}
textAlign="left"
ref={longRef}
value={latLong["latitude"] + ""}
/>

完整的代码如下

import {
Text,
View,
Button,
TouchableOpacity,
StyleSheet,
TextInput,
} from "react-native";
import RNLocation from "react-native-location";
RNLocation.configure({ distanceFilter: null });
const getLocation = () => {
let latRef = React.createRef();
let longRef = React.createRef();
let latitude;
let longitude;
let [latLong, setLatLong] = useState({});
const subscribeLocation = () => {
RNLocation.requestPermission({
ios: "whenInUse", // or 'always'
android: {
detail: "coarse", // or 'fine'
rationale: {
title: "We need to access your location",
message: "We use your location to show where you are on the map",
buttonPositive: "OK",
buttonNegative: "Cancel",
},
},
})
.then((granted) => {
console.log("Permission Granted: " + granted);
})
.catch((err) => {
console.log(err);
});
};
subscribeLocation();
const fetchLocation = () => {
if (RNLocation.getCurrentPermission()) {
RNLocation.getLatestLocation({
timeout: 60000,
}).then((location) => {
**setLatLong(location)**
});
}
};
return (
<View style={styles.container}>
<View style={styles.locationContainer}>
<TextInput
style={{
borderBottomColor: "black",
borderBottomWidth: 2,
color: "black",
}}
placeholder={"Latitude"}
placeholderTextColor="blue"
editable={false}
textAlign="left"
ref={latRef}
// value={latitude}
value={latLong["latitude"] + ""}
/>
<TextInput
style={{
borderBottomColor: "black",
borderBottomWidth: 2,
color: "black",
}}
placeholder={"Longitude"}
placeholderTextColor="blue"
editable={false}
textAlign="left"
ref={longRef}
//  value=''
value={latLong["latitude"] + ""}
/>
<View style={styles.touchButton}>
<Button
title="Get Location"
color="red"
onPress={async () => {
console.log("Press");
await fetchLocation();
// loci  = await fetchLocation()
// setLatLong(loci)
// console.log("Locii set")
// console.log("Lociiiiii " +loci["longitude"])
// longRef = loci["longitude"]
// latRef = loci["latitude"]
}}
/>
</View>
</View>
<View style={styles.editIdContiner}>
<View style={styles.touchButton}>
<Button
title="Get CSP Details"
color="red"
onPress={() => {
console.log("Hiii");
}}
/>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
width: "100%",
position: "absolute",
left: 0,
top: 0,
bottom: 0,
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
},
locationContainer: {
width: "100%",
flex: 1,
backgroundColor: "yellow",
justifyContent: "space-evenly",
alignContent: "center",
},
editIdContiner: {
width: "100%",
flex: 1,
backgroundColor: "red",
justifyContent: "space-evenly",
alignContent: "center",
},
touchButton: {
width: "100%",
color: "grey",
alignItems: "center",
},
});
export default getLocation;

Answer 1

所以主要的方法是。。

根据state变量。Value应始终是包含两个键值对的Object，如下所示

示例响应-

{
'latitude': "some value",
'longitude': "some value",
{

这是因为提供给TextInput组件的value道具显示latLong["latitude"] + ''。因此，如果我们没有在状态中传递正确的对象。。它将显示undefined。

因此，无论何时fetch，如果您想更新state，则必须确保响应为上述类型。。

此小吃展示了如何在fetching之后从服务器更新TextField值。