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>

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

你能帮我做到吗？谢谢：）

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。如果为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'）

我想我弄错了，对不起

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

3 个答案: