Erhalten Sie einen Wert von Eingang in einer Komponente reagieren nativen

Question

Ich habe ein Problem in reagieren nativen den Wert des Eingangsdatums Komponente zu erhalten:

meine Dateien:

main.js:

const DatePicker = require('./DatePicker'); 
    render(){ 
     return (
     <DatePicker defaultDate={defaultDate} minDate="01/01/1970" /> 
     ) 
    } 

DatePicker.js: gut

import React, { Component } from 'react' 
import DatePicker from 'react-native-datepicker' 
    class MyDatePicker extends Component { 
     constructor(props){ 
      super(props) 
      this.defaultDate = props.defaultDate; 
      this.minDateProp = props.minDate; 
      this.state = {date:this.defaultDate} 
     } 

     render(){ 
      return (
       <DatePicker 
        style={{flex:1, marginLeft: 8}} 
        date={this.state.date} 
        mode="date" 
        format="DD/MM/YYYY" 
        minDate={this.minDateProp} 
        maxDate={this.defaultDate} 
        confirmBtnText="Confirm" 
        cancelBtnText="Cancel" 
        customStyles={{ 
         dateText: { 
          color: '#2471ab', 
          fontSize: 15 
         } 
        }} 
        onDateChange={(date) => {this.setState({date: date})}} 
       /> 
      ) 
     } 
    } 

wenn ich jetzt ein Datum auswählen ändert er den Text in und alles, aber wie kann ich das Ergebnis speichern, wenn ich das Formular absende? Danke für jeden Hinweis.

Answer 1

Es gibt viele Ansätze, wie Sie das tun können. Einer von ihnen (die ich persönlich bevorzugen) ist Ihre individuelle MyDatePicker in einer Art und Weise zu ändern, es „Präsentations“ Komponente (lesen Sie mehr darüber hier: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.sphuynwa2) zu machen, das heißt:

import React, {PropTypes} from 'react'; 
import DatePicker from 'react-native-datepicker'; 

const customStyles = { 
    dateText: { 
    color: '#2471ab', 
    fontSize: 15 
    } 
}; 

const style = { 
    flex:1, 
    marginLeft: 8 
}; 

function MyDatePicker(props) { 
    return (
    <DatePicker 
     style={style} 
     date={props.date} 
     mode="date" 
     format="DD/MM/YYYY" 
     minDate={props.minDate} 
     maxDate={props.defaultDate} 
     confirmBtnText="Confirm" 
     cancelBtnText="Cancel" 
     customStyles={customStyles} 
     onDateChange={props.onDataChange} /> 
); 
} 

MyDatePicker.propTypes = { 
    minDate: PropTypes.string, 
    maxDate: PropTypes.string, 
    date: PropTypes.string 
}; 

export default MyDatePicker; 

Dieser Ansatz wird Ihnen helfen, Speichern Sie Ihren Status auf der Ebene der "Container" -Komponente (oder Redux/Mobx/was auch immer). Zum Beispiel:

Natürlich ist es nur eine grobe Implementierung, aber es veranschaulicht den Ansatz.

Answer 2

Sie speichern es tatsächlich in Staat:

onDateChange={(date) => {this.setState({date: date})}} 

Wenn Sie auf einem anderen Seite navigieren wollen, können Sie es durch Requisiten passieren können. vorausgesetzt, Sie verwenden reagieren-native-Router-Fluss für die Navigation:

Actions.componentNameToNavigate({ selectedDate: this.state.date }); 

Wenn Sie nicht zu einer anderen Seite navigiert und wollen es nur einreichen in derselben Seite, tun Sie etwas wie folgt aus:

import React, {Component} from 'react'; 
 
import MyDatePicker from './MyDatePicker'; 
 

 
class FormContainer extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    const date = Date.now(); 
 
    this.state = { 
 
     date: `${date.getDay()}/${date.getMonth()}/${date.getYear()}` 
 
    }; 
 

 
    /* this.submit = this.submit.bind(this); */ 
 
    // no need to bind it here if you use 
 
    //this.functionName(); 
 
    } 
 

 
    submit(date) { 
 
    // instead of reading it from state, you can pass the date to submit function. that way you dont even need to store it in state 
 
    } 
 

 
    render() { 
 
    return (
 
     <form> 
 
     <MyDatePicker 
 
      date={this.state.date} 
 
      onDateChange={(date) => { 
 
     this.setState({date}); 
 
     this.submit(date); 
 
     /// you can pass date as well as accessing it from state 
 
    } 
 
    } /> 
 
     <button onClick={this.submit}>Submit date</button> 
 
     </form> 
 
    ); 
 
    } 
 
}

Hoffe, es hilft.