绑定选择器并放入自己的值

Question

你好，我是 React Native 的新手。我使用本机基础。我做了一个移动应用程序，我需要做一个预订页面。为此，我需要创建两个 Picker 并将当前日期和下一天放入其中。

第二个早上 7 点到晚上 19 点之间的一个小时。如果当前小时为 7 或更多，则选择器的第一个值需要是当前小时。

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

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

 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);
    }

在 return 中：

    <Picker
        note
        iosHeader={"Select one"}
        mode={"dropdown"}
        style={{width: 175}}
        selectedValue={this.state.date}
        onValueChange={this.valueChangeDate.bind(this)}>
        <Item label={"today"} value={"today"}/>
        <Item label={"tomorrow"} value={"tomorrow"}/>
    </Picker>

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

我还没有绑定两个picker，现在真不知道怎么办。 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 然后将其存储在状态中（您可以在每次渲染时都这样做，但似乎没有必要）

绑定选择器并放入自己的值

Bind picker and put its own value

javascript

binding

reactjs

react-native

native-base