很难让我的数据人知道他的价值

Question

我正在学习react本机，我正在尝试将日期从我的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>
    );
};

Answer 1

您的状态在MyDatePicker中更改，但在PersonalForm中没有变化，您需要在PersonalForm中设置它，因为您要在PersonalForm中发送vBirthDate。

我建议修改PersonalForm：。

第一次输入反应-本机-数据报警器在顶部，然后：

在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)}
    />