獲取組件中的輸入值反應本機 (Get a value of input in a component react native)

問題描述

獲取組件中的輸入值反應本機 (Get a value of input in a component react native)

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

現在，當我選擇一個日期時，它會更改文本並且一切正常，但是當我提交表單時如何存儲結果？感謝您的建議。

參考解法

方法 1:

There are many approaches how you can do that. One of them (which I personally prefer) is to change your custom MyDatePicker in a way to make it "presentational" component (read more about it here: https://medium.com/@dan_abramov/smart‑and‑dumb‑components‑7ca2f9a7c7d0#.sphuynwa2), i.e.:

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;

This approach will help you to store your state at the level of "container" component (or redux / mobx / whatever). For example:

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

Of course, it's just a rough implementation, but it illustrates the approach.

方法 2:

You are actually storing it in State :

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

If you are going to navigate to another page, you can pass it through props. assuming you're using react‑native‑router‑flux for navigation :

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

If you're not navigating to another page and just want to submit it in same page, do something like this :

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

Hope it helps.

(by gregory、Alexey Kureev、Ata Mohammadi)

參考文件

1. Get a value of input in a component react native (CC BY‑SA 2.5/3.0/4.0)