Question

我在react native中遇到问题，无法获取日期组件中的输入值：

我的档案：

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

您实际上将其存储在State：

中

IDA Pro

如果您要导航到另一个页面，可以通过道具传递它。假设您使用react-native-router-flux进行导航：

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

如果您没有导航到其他页面并且只想在同一页面中提交，请执行以下操作：

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

希望它有所帮助。

获取组件中的输入值作为本机响应

2 个答案: