Новый пользователь реагирует, если ему нужна помощь в реализации datepicker-npm. - PullRequest
Новая
       9

Новый пользователь реагирует, если ему нужна помощь в реализации datepicker-npm.

0 голосов
/ 11 мая 2018

Не уверен, что я делаю не так здесь ??

В простом веб-приложении response-redux я не могу установить новую дату для установки.

OnChange должен установитьвыбор нового состояния для «даты покупки» ??

Вот мой код ... 

  import React, { Component } from 'react';
import { connect } from 'react-redux';

import DatePicker from 'react-datepicker';
import moment from 'moment';

import 'react-datepicker/dist/react-datepicker.css';

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

class DateSelect extends Component {
  constructor (props) {
    super(props)
    this.state = {
      startDate: moment()
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      selected: date
    });
  }

  render() {
    return <DatePicker
        selected={this.state.startDate}
        onChange={this.purchase_date}
    />;
  }
}

 export default DateSelect;

/////// 

<TableRow selectable={false} key={id}>
                    <TableRowColumn>{item_description}</TableRowColumn>
                    <TableRowColumn>{purchase_date}</TableRowColumn>
                    <TableRowColumn id="count-me">${item_price}




                    **<DatePicker
                    selected={this.state.startDate}
                    onChange={this.purchase_date}

                />**

1 Ответ

0 голосов
/ 11 мая 2018

Во-первых, вы связываете свой обработчик, но фактически не используете его.Кроме того, вы можете передать дату через реквизит, чтобы ее можно было установить в начальное значение, которое не является текущей датой (по умолчанию используется текущая дата, если она не указана: 

class DateSelect extends Component {
  constructor (props) {
    super(props);
    this.state = {
      startDate: moment()
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      selected: date
    });
  }

  render() {
    return <DatePicker
        selected={this.props.selected || this.state.startDate}
        onChange={this.handleChange} // <- attaches handleChange to onChange
    />;
  }
}

Сейчас, вниз вВаш JSX для вашей таблицы, вам нужно только вызвать ваш компонент. Вы должны вызывать свой пользовательский компонент вместо DatePicker, чтобы он загружался с вашим поведением и позволял вам делать такие вещи, как передача значений по умолчанию или сохраненных значений в подпорки компонентов: 

<TableRow selectable={false} key={id}>
<TableRowColumn>{item_description}</TableRowColumn>
<TableRowColumn>{purchase_date}</TableRowColumn>
<TableRowColumn id="count-me">${item_price}

   <!-- DateSelect component, passing the 'selected' prop as 
        an value in someStartDate  -->
     <DateSelect selected={someStartDate} />
...