Question

您好，我是本地人的新手。我使用原生基础。我制作了一个移动应用程序，我需要预订页面。要做到这一点，我需要创建两个Picker并在那里放置当前日期和下一个作为第一天。

第二个上午7点到晚上19点之间的一个小时。如果当前小时为7或更大，则选择器的第一个值必须是当前小时。

Two Picker with current date and next for the first and hour of the day for the second

我的选择器中的值是我的表索引，我不明白，因为它在javascript控制台中工作。见代码：

['john','steve','jack','anna']

在渲染中：

 constructor (){
    super();

    this.state = {
        date: '',
        surface: '',
        start: '',
    };
}

valueChangeDate(value: String){
    this.setState({
        date: value
    });
}

valueChangeStart(value: String){
    this.setState({
        start: value
    });
}

作为回报：

var hours = [];
    let today = new Date();
    let hour = ('0'+today.getHours()).slice(-2);
    for(hour<7 ? hour=7 : hour; hour<19; hour++){
        hours.push(hour);
        // console.log(hours[hour]);
        console.log(hour);
    }

我还没绑定两个选择器，我现在真的不怎么做。 console.log的结果是18小时之前的当前好时间，但不是选择器中显示的内容。

我不确定是否正确解释了我的问题，但是我很久以来就陷入了困境，我仍然不知道解决方案。

Answer 1

我可能误解了你的问题，但这是我的答案。

您在选择器中将您的键索引显示为标签：label={key}，请尝试label={hours[key]}。

确保您为此标签指定字符串值：hours.push(hour.toString())

我还建议您在安装组件时填充小时数组，而不是在render（）方法（性能）中填充

这是一个完整的工作代码：

import React, { Component } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';

export default class App extends Component {
  constructor (){
    super();

    this.state = {
        date: '',
        surface: '',
        start: '',
        hours: [],
    };
    this.valueChangeDate = this.valueChangeDate.bind(this);
    this.valueChangeStart = this.valueChangeStart.bind(this);
}
componentWillMount() {
  const hours = [];
  const today = new Date();
  let hour = ('0'+today.getHours()).slice(-2);
  for(hour<7 ? hour=7 : hour; hour<19; hour++){
        hours.push(hour.toString());
    }
    this.setState({
      hours
    });
}

valueChangeDate(value: String){
    this.setState({
        date: value
    });
}

valueChangeStart(value: String){
    this.setState({
        start: value
    });
}
  render() {
    return (
      <View style={styles.container}>
       <Picker
        note
        iosHeader={"Select one"}
        mode={"dropdown"}
        style={{width: 175}}
        selectedValue={this.state.date}
        onValueChange={this.valueChangeDate}>
        <Picker.Item label={"today"} value={"today"}/>
        <Picker.Item label={"tomorrow"} value={"tomorrow"}/>
    </Picker>

    <Picker
        note
        inlineLabel={true}
        mode={"dropdown"}
        style={{width: 175}}
        selectedValue={this.state.start}
        onValueChange={this.valueChangeStart}>
        {this.state.hours.map((hourItem) => {
             return (
                 <Picker.Item key={hourItem} label={hourItem} value={hourItem}/>
             )
         })}
     </Picker>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我将Object.keys(hours).map((key)更改为this.state.hours.map((hourItem)，因为您只需要项目的值而非索引键。

我在componentWillMount中填充hours然后将其存储在状态中（您可以在每次渲染时执行此操作但似乎没必要）

捆绑选择器并放置自己的价值

1 个答案: