Question

我想这是一个简单的问题。我有一个RN App，并且在TextInput中我想显示一些值。

TextInput值应显示为00:00，并且用户可以将该值修改为ex。是06:00。如何渲染TextInput以显示00:00的值？

<Text style={styles.timeText} >Time:</Text>
                    <TextInput style={styles.timeInp} keyboardType={"numeric"} 
                    value={this.state.time} onChange={(time) => this.setState({time})} />

有点像这样，但我无法将值显示为00:00。

请提前

Answer 1

如果要标记时间或日期，

import moment from "moment";
...
let date = moment(new Date()).format("YYYY-MM-D-ss");

如果您只是想在其中获取数据，

    constructor(props) {
        super(props);
        this.state = {
         time: "06:00"
        };
      }
...
<TextInput style={styles.timeInp} 
keyboardType={"numeric"} 
value={this.state.time} 
onChangeText={(time) => this.setState({time})} />

如示例中所述，您可以将“ 06:00”设置为默认设置。

并清除在06:00中输入的TextInput，然后输入新的00:00。

Answer 2

您有两个选择，

添加选择器以选择时间

OR

为选定的小时和分钟添加两个TextInput，例如：

为小时和分钟添加两个状态值

this.state = {
 ...
 hour: "00",
 min: "00"
};

并为小时和分钟添加两个文本输入

    <View style={{ flexDirection: "row" }}>
          <Text style={{}}>{"Time :    "}</Text>
          <TextInput
            style={{}}
            keyboardType={"numeric"}
            value={this.state.hour}
            onChange={hour => {
              this.setState({ hour: hour });
            }}
          />
          <Text style={{}}>{":"}</Text>
          <TextInput
            style={{}}
            keyboardType={"numeric"}
            value={this.state.min}
            onChange={min => {
              this.setState({ min: min });
            }}
          />
     </View>

React Native：将TextInput值设置为00:00

2 个答案: