如何使用 DateTimePicker 值更新 TextInput？反应本机

Question

我正在尝试实施 https://github.com/react-native-datetimepicker/datetimepicker。我在想要 select 日期的地方创建 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>
    );
}

DateTimePicker 代码：

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

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

ReactNativeJS: 2020-08-19

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

如何使用 DateTimePicker 值更新 TextInput？反应本机

How to update TextInput with DateTimePicker value? react native

react-native

datetimepicker

use-state

react-native-textinput