TimePicker (react-native-simple-time-picker) 无法设置初始值

问题描述

我在 react native (react-native-simple-time-picker) 中使用 TimePicker，我想设置初始值 10:47，但我无法设置。我使用属性 hoursUnit 和 minutesUnit 但很奇怪在值前面附加了一个零。喜欢几个小时显示“010”。

  <TimePicker
  hoursUnit="0"
  selectedMinutes="0"
  onChange={(hours,minutes) => this.setState({ selectedHours: hours,selectedMinutes: minutes })}
   />

如果我将 hoursUnit 设置为 10 ，则值为 010。

这是我目前尝试过的代码：

constructor(props) { super(props); 

state = { selectedHours: 10,selectedMinutes: 47,} } 
render (){ 
    return( <TimePicker 
            selectedMinutes={this.selectedMinutes} 
            selectedHours={this.selectedHours} 
            onChange={(hours,minutes) => this.setState({ 
                 selectedHours: hours,selectedMinutes: minutes })} /> 
) }

解决方法

您遇到此问题是因为您将 selectedHours 与 hoursUnit（用于小时标签的字符串）混淆并为 selectedMinutes 和 selectedHours 提供了一个字符串 -根据 API 类型应该是数字。因此，API 将其连接到“010”，因为 '10' 是您的标签，而 selectedHours 在未提供时默认为 0，因此 '010'..

为了从你的 state-prop 中获取小时和分钟，你需要在你的渲染语句中声明一个 const：const { selectedHours,selectedMinutes } = this.state;（参见下面的例子......）。

来自文档：

要设置一个初始值，即10:47 你可以试试：

export default class App extends Component {
  state = {
    selectedHours: 10,selectedMinutes: 47,}

  render() {
    const { selectedHours,selectedMinutes } = this.state;
    return (
      <View style={styles.container}>
        <Text>{selectedHours}:{selectedMinutes}</Text>
        <TimePicker
          selectedHours={selectedHours}
          selectedMinutes={selectedMinutes}
          onChange={(hours,minutes) => this.setState({ selectedHours: hours,selectedMinutes: minutes })}
        />
      </View>
    );
  }

当我这样做时有效：

 <TimePicker
hoursUnit='' // default
selectedMinutes={47}
selectedHours={10}
onChange={(hours,selectedMinutes: minutes })}

react-native react-native react-redux timepicker timepicker