Question

不确定我在这里做错了什么？

在简单的react-redux网络应用中，我无法设置新的日期。

onChange应该将选择设置为＆quot; purchase_date＆＃39;

的新状态

这是我的代码......

  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}

                />**

Answer 1

首先，您绑定了处理程序，但实际上并没有使用它。此外，您可能希望通过道具传递日期，以便将其设置为不是当前日期的初始值（如果未指定，则默认为当前日期：

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，以便它加载你的行为，并允许你做一些事情，比如将默认值或存储值传递给组件props：

<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} />

新用户需要帮助实现datepicker-npm

1 个答案: