如何使用 DateTimePicker 值更新 TextInput？反应原生

Posted 2023-05-07

【中文标题】如何使用 DateTimePicker 值更新 TextInput？反应原生

【英文标题】：How to update TextInput with DateTimePicker value? react native

【发布时间】：2021-08-20 12:23:52

【问题描述】：

我正在尝试实现https://github.com/react-native-datetimepicker/datetimepicker。 我在要选择日期的地方创建 TextInput 并将其显示到此 TextInput 中，但没有任何反应。 我不知道该怎么做。

这是我的代码：

主要组件代码：

constructor(props) 
    super(props)
    this.state = 
      text: '',
      show: false,
      timestamp: new Date(1598051730000)
    ;
  

dateChange = (event, selectedDate) => 
        let newDate = new Date(selectedDate);
        let month =
          newDate.getMonth() < 9
            ? '0' + (newDate.getMonth() + 1)
            : newDate.getMonth() + 1;
        let date =
          newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
        let dateText = newDate.getFullYear() + '-' + month + '-' + date;
        this.setState(
          text: dateText,
          timestamp: selectedDate,
          show: false
        )
        console.log(this.state.text)  
      

render() 
          return (
            <View>
              <View style=backgroundColor: 'purple', height: '100%'>
                <View>
                  <MyTextInput
                    btn=1
                    placeholder='test'
                    isDateTime=true
                    onChangeText=(value) => this.setState(text: value)
                    onFocus=this.inputType
                    value=this.state.text />
                  
                  this.state.show && (
                    <DTPicker
                      onChange=this.dateChange 
                      value=this.state.timestamp />
                  )
                </View> 
              </View>     
            </View>
          )
      

文本输入代码：

export function MyTextInput(props) 
    const btn = props.btn;

    return (
        <View style=btn ? styles.container : styles.container2>
            <TextInput
                style=btn ? styles.input : styles.input2
                onChangeText=(value) => props.onChangeText(value)
                placeholder=props.placeholder
                onFocus=props.onFocus
                showSoftInputOnFocus=props.isDateTime ? false : true /> 
            
        </View>
    );

日期时间选择器代码：

export function DTPicker (props) 
    return (
        <View style=styles.container >
            <DateTimePicker
                onChange=props.onChange 
                value=props.value
                mode='date'
                is24Hour='true' />
        </View>
    )

我应该更改或添加什么来获取在 DTPicker 中选择日期后正在更新的 TextInput？ dateChange() 函数中的 console.log 显示正确的值，但 TextInput 没有更新：

ReactNativeJS: 2020-08-19

【参考方案1】：

您没有将 value 属性绑定到 TextInput 组件。

export function MyTextInput(props) 
    const btn = props.btn;

    return (
        <View style=btn ? styles.container : styles.container2>
            <TextInput
                style=btn ? styles.input : styles.input2
                onChangeText=(value) => props.onChangeText(value)
                placeholder=props.placeholder
                onFocus=props.onFocus
                value=props.value // Bind the value here like this.
                showSoftInputOnFocus=props.isDateTime ? false : true /> 
            
        </View>
    );

【讨论】：

但是当我在其中输入文本时它正在工作。编辑：好的，就是这样。谢谢你