Получить значение входа в компоненте реагировать родной

Question

У меня есть проблема в реакции родной, чтобы получить значение входа в дату компонента:

мои файлы:

main.js:

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

DatePicker.js:

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

Теперь, когда я выбираю дату она меняет текст, и все хорошо, , но как я могу сохранить результат при отправке формы? Спасибо за любой совет.

Answer 1

Существует много подходов, как вы можете это сделать. Один из них (который я лично предпочитаю), чтобы изменить свой обычай MyDatePicker таким образом, чтобы сделать его «презентационный» компонент (подробнее об этом здесь: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.sphuynwa2), то есть:

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; 

Такой подход поможет вам сохраните свое состояние на уровне «контейнерного» компонента (или redux/mobx/whatever). Например:

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

    submit() { 
    // submit this.state to the server 
    } 

    render() { 
    return (
     <form> 
     <MyDatePicker 
      date={this.state.date} 
      onDateChange={(date) => this.setState({date})} /> 
     <button onClick={this.submit}>Submit date</button> 
     </form> 
    ); 
    } 
} 

Конечно, это просто грубая реализация, но это иллюстрирует подход.

Answer 2

Вы фактически хранить его в штате:

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

Если вы собираетесь перейти на другую страницу, вы можете передать его через реквизита. при условии, что вы используете реагировать-нативный-маршрутизатор-поток для навигации:

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

Если вы не перейти на другую страницу и просто хотите, чтобы представить его в той же странице, сделать что-то вроде этого:

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

Надеется, что это помогает.