Question

我在reactJS中有一个表，其中包含以下字段的项目数组

id， requested_date＆amp; location

我还有一个字段，这是一个日期字段。因此，在items数组中，我可能有一个或多个具有不同requested_date的项目。

但是在那个日期字段（在数组之外）应该具有requested_date数组中的最新日期。

结构如下

项目数组

id requested_date location 101 2018-03-21 NY 102 2018-03-22 NY 103 2018-03-20 NY

Date : 2018-03-22

在上面的结构中Date : 2018-03-22因为2018-03-22是来自items数组的最新requested_date。

请在下面找到我的代码。

class Details extends React.Component {
    constructor(props) {
    super(props);
    this.requestedDateChangeonSelectionEvent=this.requestedDateChangeonSelectionEvent.bind(this);
    this.state = { item: props.item };

}
requestedDateChangeonSelectionEvent(dateSelected)
{

    var item = this.state.item;
    var lines = item.order_items;
    if(lines.length == 1)
        {
            var latest = dateSelected; 
            console.log("Length 1");

        }

    else {
        var latest = dateSelected; 
     for(var i=0;i<lines.length;i++) {
         if(moment(lines[i].requested_date) >= moment(latest)) {
             latest=lines[i].requested_ship_date;
             }
         }

    }
       this.state.item.date=latest;
        this.setState({ item: item });

}

render() {
   return (<tbody>{ this.props.items.map((item) => <DetailsItem key={ item.line_id } item={ item } 
                                                        requestedDateChangeonSelectionEvent={ this.props.requestedDateChangeonSelectionEvent }
                                                     />) }

              </tbody>);    
      }
}

class DetailsItem extends React.Component {
constructor(props) {
    super(props);
    this.handleRequestedShipDate = this.handleRequestedShipDate.bind(this);
}

handleRequestedShipDate(e)
{

    var item=this.state.item;
    this.setState({item:item});
    var charCode = (e.which) ? e.which : e.keyCode;
    var dateSelected=e.target.value;
    e.preventDefault();
    this.props.requestedDateChangeonSelectionEvent(dateSelected);

}
render() {


    return (
            <tr>
            <td><input name="line_number" type="text" value={ this.state.item.line_number } onChange={ his.handleInputChange }/> </td>
            <td><input name="requested_date"  type="date" value={ this.state.item.requested_date } onChange={ (e) => { this.handleRequestedShipDate(e); this.handleInputChange(e); } }  </td>
            <td><input name="source_location" type="text" value={ this.state.item.source_location } onChange={ this.handleInputChange }/> </td>
            </tr>   
             );
    }
}

我正在尝试像。{requested_date本身的选择，它应该在Date字段中找到最新日期和更新。

虽然我为第一个项目选择了request_date，但是当我选择第二个和第三个项目时，却没有找到当前选择request_date,以前的选择。

详细问题：

日期比较没有问题。它按照预期发生。问题是如果我更改数组中间的任何日期值或某些位置。，它维护以前的值并与旧值本身进行比较。数据选择过程中没有发生变化。例如。，

id requested_date location 101 2018-03-21 NY 102 2018-03-22 NY 103 2018-03-20 NY

现在，如果我对102记录进行任何更改，例如。，

id requested_date location 101 2018-03-21 NY 102 2018-03-19 NY 103 2018-03-20 NY

我希望在选择过程中发生2018-03-19更改并应与其他requested_date进行比较，并将最新日期更改为2018-03--21。

但是，它没有发生，它保持旧值2018-03-22这个值在日期选择期间不会改变该数组元素。

Answer 1

我认为这与以下内容重复：Moment js date time comparison。

尝试使用momentjs的diff函数。

当您尝试比较两个时刻对象时，JavaScript只会比较它们的引用而不是它们的实际值（JavaScript不知道如何使用>=来比较日期）。因此，使用diff函数返回日期之间的实际差异（这将是整数，JavaScript知道如何比较整数！）

ReactJS / JavaScript - 在进行选择时从日期字段数组中查找最新日期

1 个答案: