获取组件中的输入值反应本机

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 使其成为 "presentational" 组件（在此处阅读更多信息：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;

这种方法将帮助您将状态存储在 "container" 组件（或 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

您实际上是将其存储在 State 中：

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

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

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

希望对您有所帮助。

获取组件中的输入值反应本机

Get a value of input in a component react native

store

datepicker

react-native