獲取分量輸入的值反應本地

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 /無論）的級別。例如：

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

希望它能幫助。