OGeek|极客世界-中国程序员成长平台

标题: javascript - React Native 不显示来自 TextInput 的日期选择器 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 12:54
标题: javascript - React Native 不显示来自 TextInput 的日期选择器

我想知道是否可以在按下 TextInput 时显示日期选择器模式。

我正在使用 TouchableWithoutFeedback 和 TextInput。如果我使用 Text 效果很好，但是当我使用 TextInput 时，日期选择器模式不会显示。

我使用 TextInput 的原因是因为我想使用 underlineColorAndroid 属性。

这是代码

showPicker = async (stateKey, options) => {
    try {
      const newState = {};
      const { action, year, month, day } = await DatePickerAndroid.open(options);
      if (action === DatePickerAndroid.dismissedAction) {
        newState[stateKey + 'Text'] = 'dismissed';
      } else {
        const date = new Date(year, month, day);
        newState[stateKey + 'Text'] = date.toLocaleDateString();
        newState[stateKey + 'Date'] = date;
      }
      this.setState(newState);
    } catch ({ code, message }) {
      console.warn(`Error in example '${stateKey}': `, message);
    }
  };

<TouchableWithoutFeedback
            onPress={this.showPicker.bind(this, 'simple', { date: this.state.simpleDate })}
          >
            <TextInput
              placeholder="Where the event held*"
              onFocus={() => this.onFocus()}
              onFocus={() => this.onFocus()}
              style={{ 
                height: 60, backgroundColor: this.state.backgroundColor, color: this.state.color 
              }}
              value={this.state.simpleText}
            />
          </TouchableWithoutFeedback>

目标 是每当我按下/单击 TextInput 时，它都会弹出日期选择器模态，然后我可以从模态中选择日期。

---

Best Answer-推荐答案

你只需要在 TextInput 的 onFocus 属性中调用 showPicker 函数。像那样:

<TextInput onFocus = {this.showPicker.bind(this, 'simple', { date: this.state.simpleDate })}>

如果我的想法不符合您的目标，请原谅我。

关于javascript - React Native 不显示来自 TextInput 的日期选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42130921/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4