获取分量输入的值反应本地

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

希望它能帮助。