react- native 同一个页面中有几个区域公用一个时间控件 改变其中一个时间控件的时间 怎么不影响其他
时间: 2024-03-11 20:51:39 浏览: 14
你可以在React Native中使用state来管理每个时间控件的时间。每个时间控件都可以存储其自己的时间,而不会影响其他时间控件的时间。当你改变一个时间控件的时间时,只需要更新该时间控件所对应的state,这样其他时间控件的时间就不会受到影响。例如:
```jsx
import React, { useState } from 'react';
import { View, Text, TimePickerAndroid } from 'react-native';
const TimePickerExample = () => {
const [time1, setTime1] = useState(new Date()); //state用于管理第一个时间控件的时间
const [time2, setTime2] = useState(new Date()); //state用于管理第二个时间控件的时间
//打开时间选择器
const openTimePicker = async (time, setTime) => {
try {
const { action, hour, minute } = await TimePickerAndroid.open({
hour: time.getHours(),
minute: time.getMinutes(),
is24Hour: true,
});
if (action !== TimePickerAndroid.dismissedAction) {
const newTime = new Date();
newTime.setHours(hour);
newTime.setMinutes(minute);
setTime(newTime); //更新所对应的state
}
} catch ({ code, message }) {
console.warn('Cannot open time picker', message);
}
};
return (
<View>
<Text onPress={() => openTimePicker(time1, setTime1)}>Time 1: {time1.toLocaleTimeString()}</Text>
<Text onPress={() => openTimePicker(time2, setTime2)}>Time 2: {time2.toLocaleTimeString()}</Text>
</View>
);
};
export default TimePickerExample;
```
在这个例子中,我们使用了两个state,分别管理两个时间控件的时间。每个时间控件对应的`onPress`事件会打开一个时间选择器,并更新对应的state。这样,每个时间控件的时间都是独立的,互不干扰。