React JS中的datePicker设置了所有表所有行的同一日期。如何解决这个问题？

Question

我的表中有多行，日期选择器设置了与用户在所有行上选择的日期相同的日期。请建议如何解决这个问题。

在“移交到技术”列中，采摘日期选择器被使用。

这是组件代码。它称为跟踪器图表

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

changeDate(stateName, e){

    this.setState({[stateName]: e});
    console.log(stateName + e)
    
} 

    render() {
        let filteredfiles = this.state.tracker.filter(
            (file) => {
                return file.root.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
            }
        );

        return (
            <div>
                <h2 className='text-center'>Tracker Chart</h2>
                <br></br>
                <Row>
                <div className="input-2">
                <ExportReactCSV csvData={this.state.tracker} fileName={"Tracker Chart"} />
                </div>
                <div className= "input-1">
                <input class= "form-control chosen-select" type = "text" align = "left" placeholder = "Search by Style Number Here" 
                            value = {this.state.search}
                            onChange = {this.updateSearch.bind(this)}
                        />
                        </div>
                </Row>
                <br></br>
                <div className = 'row1'>
                    
                    <table className='table table-striped table-bordered'>
                        
                        <thead>
                            <tr>
                                <th>Ladder Plan</th>
                                <th>Style Number</th>
                                <th>Vendor</th>
                                <th>Size Range</th>
                                <th>FOB Cost</th>
                                <th>Total Quantity</th>
                                <th>CXL Date</th>
                                <th>Handover to Tech</th>

                                
                            </tr>
                        </thead>

                        <tbody>

                            {
                                filteredfiles.map(
                                    master =>
        
                                    <tr key = {master.tID}>
                                        <td>{master.lp}</td>
                                        <td>{master.root}</td>
                                        <td>{master.vendor}</td>
                                        <td>{master.actSize}</td>
                                        <td>{master.totFcost}</td>
                                        <td>{master.totalQty}</td>
                                        <td>{master.cxlDate}</td>
                                        <td><DatePicker  
                        dateFormat = 'dd/MM/yyyy'
                        selected = {this.state.techHandover} placeholderText="Select Date"   
                        onChange= {this.changeDate.bind(this, 'techHandover')} 
                        maxDate = {new Date()}
                        filterDate = {date => date.getDay() !== 0}
                        showYearDropdown
                        scrollableMonthYearDropdown
                    />
                    </td>
                                    </tr>
                                )
                            }

                        </tbody>
                    </table>

                </div>

            </div>
        );
    }
}

export default TrackerComponent;

Answer 1

从更改功能返回值并从那里获取值，希望这可能对您有所帮助:)