时间戳

首页 > 解决方案 > 单击可触摸的不透明度后，我试图隐藏并显示反应本机日期选择器

javascript - 单击可触摸的不透明度后，我试图隐藏并显示反应本机日期选择器

问题描述

我正在开发一个反应本机应用程序，我试图弄清楚如何在单击可触摸的不透明度组件后隐藏日期选择器。

这是设置 datetimepicker 的逻辑

 const [showCompleted, setShowCompleted] = useState(false);
 const [isHidden, setHidden] = useState(true);

 const onChange = (event, selectedDate) => {
   const completedDate = selectedDate || Date;
   setShowCompleted(Platform.OS === 'ios');
   setCompletedDate(completedDate);
 };

 const showDatepicker = () => {
   if (isHidden === true) {
     setHidden({ isHidden: false });
     setShowCompleted(true);
   } else {
     setHidden({ isHidden: true });
   }
 };

这是 UI 的逻辑

<TouchableOpacity
    style={{
      height: 50,
      margin: 15,
      backgroundColor: 'white',
      borderRadius: 5
    }}
    onPress={showDatepicker}
  >
    <View flexDirection='row'>
      <Text style={{ color: 'red', fontSize: 15, margin: 15 }}>
        Completed Date
      </Text>
      <Text style={{ marginTop: 15, fontSize: 14, marginLeft: 140 }}>
        Mar 17, 2020
      </Text>
    </View>
  </TouchableOpacity>
  {isHidden ? (
    <View>
      {showCompleted && (
        <DateTimePicker
          testID='dateTimePicker'
          placeholder='Completed Date'
          value={completedDate}
          mode='date'
          display='default'
          onChange={onChange}
        />
      )}
    </View>
  ) : null}

欢迎任何想法。我正在尝试实现与在 iphone 上安排新活动相同的效果。在你触摸日期的地方，日期选择器下降，你再次触摸它，它就会上升。目前，它下降了，但我不知道如何让它回去。我想我忽略了一些非常简单的事情。

标签： javascriptreactjsreact-native

解决方案

您的问题似乎是您以错误的方式更新状态，您正在保存包含数据的对象，而不是这样做，而是尝试只放置Boolean值，因此像这样简化您的开启函数

const showDatepicker = () => {
   setShowCompleted(!showCompleted);
};

所以每次你的函数被执行setShowCompleted时，布尔值都会取反showCompleted，所以如果你第一次false点击按钮false时得到true，下一次true变成false，依此类推。

所以你可以删除isHidden状态，只使用showCompletedvalue

推荐阅读