反应本机日期时间选择器选择

Question

我需要一些帮助。我这样使用包@react-native-community/datetimepicker :

<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>

这很酷，但是当我选择日期时，我希望它替换文本“select 一个日期”（仅在选择日期时）

你能帮我做吗？谢谢:)

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>

这没有变化，没有反应（仍然有“Select一个约会）

然后，我输入我的状态 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 is not an object (evaluating 'this.state.datetimeS.trim')

我想我弄错了，对不起

反应本机日期时间选择器选择

React native date time picker selection

datetimepicker

react-native