React本地日期时间选择器选择

Question

我想得到一些帮助.我用包@react-native-communitydatetimepicker这种方式。

<View>
    <DatePicker
     date={this.state.datetimeS}
     mode="datetime"
     format="YYYY-MM-DD HH:mm"
     confirmBtnText="Confirm"
     cancelBtnText="Cancel"
     hideText={true}
     showIcon={true}
     onChange={(datetime) => {
     this.setDateTimeS(datetime);
      }}
     />
   <Text style={styles.textsmall}>Select a date
 </Text>
</View>

IT这是很酷的，但当我选择日期时，我希望它取代文本 "选择一个日期"（只有当日期被选中时

你能帮我做到这一点吗？谢谢你:)

Answer 1

也许可以有条件地问？试试这样。

<View>
    <DatePicker
     date={this.state.datetimeS}
     mode="datetime"
     format="YYYY-MM-DD HH:mm"
     confirmBtnText="Confirm"
     cancelBtnText="Cancel"
     hideText={true}
     showIcon={true}
     onChange={(datetime) => {
     this.setDateTimeS(datetime);
      }}
     />

  {this.state.datetimeS == null ? <Text style={styles.textsmall}>Select a date
 </Text> : <Text> {this.state.datetimeS} </Text> } 

</View>

这将检查你的日期状态是否已经被一个日期值填满。为了让这个功能发挥作用，datetimeS的默认值必须是null。如果它是空的，所以没有选择日期，它就会显示文本，如果选择了一个日期，它应该显示日期。

如果你的datetimeS的默认状态是这样的。

 state={ datetimeS: ""} 

那么你可以像这样检查它。

    {this.state.datetimeS.trim() == "" ? <Text style={styles.textsmall}>Select a date
 </Text> : <Text> {this.state.datetimeS} </Text> } 

Answer 2

使用状态来改变它。在状态中使用dateTimeS并在onChange函数中更新它？

<Text style={styles.textsmall}>{this.state.dateTimeS === undefined ? 'Select a date' : 'other text'}</Text>

Answer 3

按照yesIamFaded（感谢你的帮助）的建议，我做了 。

  <View>
                <DatePicker
                  date={this.state.datetimeS}
                  mode="datetime"
                  format="YYYY-MM-DD HH:mm"
                  confirmBtnText="Confirm"
                  cancelBtnText="Cancel"
                  hideText={true}
                  showIcon={true}
                  onChange={(datetime) => {
                    this.setDateTimeS(datetime);
                  }}
                />
                {this.state.datetimeS == null ? (
                  <Text style={styles.textsmall}>Select a date</Text>
                ) : (
                  <Text> {this.state.datetimeS} </Text>
                )}
              </View>

这不会改变，没有反应（仍然有 "选择一个日期"）。

然后，我把我的状态datetimeS：""（一开始我有datetimeS："2020-01-01 09:00"）。

<View>
                    <DatePicker
                      date={this.state.datetimeS}
                      mode="datetime"
                      format="YYYY-MM-DD HH:mm"
                      confirmBtnText="Confirm"
                      cancelBtnText="Cancel"
                      hideText={true}
                      showIcon={true}
                      onChange={(datetime) => {
                        this.setDateTimeS(datetime);
                      }}
                    />
                    {this.state.datetimeS.trim() == "" ? (
                      <Text style={styles.textsmall}>Select a date</Text>
                    ) : (
                      <Text> {this.state.datetimeS} </Text>
                    )}
                  </View>

这给了我一个错误：undefined不是一个对象(评估'this.state.datetimeS.trim')

我想是我弄错了，对不起。