时间戳

首页 > 解决方案 > 让我的日期选择器传递他的价值的麻烦

javascript - 让我的日期选择器传递他的价值的麻烦

问题描述

我正在学习本机反应，我正在尝试将日期从我的 datepicker 组件传递到表单，但我无法这样做。我试图在表单上创建日期选择器，但由于我的表单处于挂钩状态，我无法这样做。

这是日期选择器的代码

import DatePicker from 'react-native-datepicker';
//import DatePicker from the package we installed

export default class MyDatePicker extends Component {

  constructor(props) {
    super(props)
    //set value in state for initial date
    this.state = {
      date: "15-05-2018"
    }
  }


  render() {
    return ( <View style = {
        styles.container
      }>

      <DatePicker date = {
        this.state.date
      } //initial date from state
      mode = "date" //The enum of date, datetime and time
      placeholder = "select date"
      format = "DD-MM-YYYY"
      minDate = "01-01-1900"
      maxDate = "01-01-2019"
      confirmBtnText = "Confirm"
      cancelBtnText = "Cancel"
      androidMode = "spinner"
      onDateChange = {
        (date) => {
          this.setState({
            date: date
          }, console.log({
            date: date
          }))
        }
      }
      />

      </View>
    )
  }
}

日期选择器有效，控制台日志在字符串上显示日期，问题似乎出在我的表单和获取值的方式上

import MyDatePicker from './MyDatePicker';

    const PersonalForm = ({onSubmit, errorMessage}) => {
        const [vName, setvName] = useState('');
        const [vSecondName, setvSecondName] = useState('');
        const [vBirthDate, setvBirthDate] = useState('');

        return ( 
            <ScrollView>
              <View style={styles.buttonContainer}>
                <View style={styles.inputContainer}>
                  <TextInput style={styles.inputs}
                    placeholder="Nombre"
                    underlineColorAndroid='transparent'
                    onChangeText={newvName => setvName(newvName)}
                    value={vName}
                autoCorrect={false}
                autoCapitalize='characters'
              />
            </View>
            <View style={styles.inputContainer}>
              <TextInput style={styles.inputs}
                placeholder="Segundo nombre"
                underlineColorAndroid='transparent'
                onChangeText={newvSecondName => setvSecondName(newvSecondName)}
                value={vSecondName}
                autoCorrect={false}
                autoCapitalize='characters'
              />
              </View>

              <View>
                <MyDatePicker vBirthDate={date} />
              </View>
          </View>
          <View style={styles.buttonContainer2}>
              <TouchableOpacity 
                style={ styles.logout}  
                onPress={() => onSubmit(vName, vSecondName, vBirthDate), console.log(vName, vSecondName, vBirthDate)}
              >
                  <Text style={styles.loginText}>GUARDAR</Text>
              </TouchableOpacity>
          </View>
        </ScrollView>
    );
};

标签： javascriptreactjsreact-native

解决方案

您的状态在 MyDatePicker 内部发生变化，但在 PersonalForm 内部没有变化，您需要在 PersonalForm 内部设置它，因为您将 vBirthDate 发送到 PersonalForm 内部的表格。
我建议更改 PersonalForm:.
首先在顶部导入 react-native-datepicker，然后：
在 PersonalForm 中，您有 MyDatePicker 将其删除并添加：

<DatePicker 
      date={vBirthDate} //initial date from state
      mode="date" //The enum of date, datetime and time
      placeholder="select date"
      format="DD-MM-YYYY"
      minDate="01-01-1900"
      maxDate="01-01-2019"
      confirmBtnText="Confirm"
      cancelBtnText="Cancel"
      androidMode="spinner"
      onDateChange={(date) => setvBirthDate(date)}
    />

推荐阅读