Как добавить DatePicker по нажатию кнопки reactjs

Question

Я хотел бы знать, как создать динамическую c строку с datepicker в качестве поля при нажатии кнопки. Нужно динамически создавать строки по нажатию кнопки, строка создается по нажатию. Но Datepicker не работает. Но мне нужно добавить одно поле как Datepicker Как это сделать в reactjs

У меня есть компонент DynamicTable, который создает строки с полями, используемые в Home

import DynamicTable from "./../../../components/DynamicTable";
import DatePicker from "react-date-picker";

class Home exends React.PureComponent{
  constructor(props){
    super(props);
    this.state={
           additionalFields: [
              { date: "",  id: 0 }
            ]
    }
 handleAddRow = e => {
    if (e) e.preventDefault();
    const rowLength = this.state.additionalFields.length;
    let lastele = this.state.additionalFields[rowLength - 1];
    const item = {
      date: "",
       id: lastele.id + 1
    };
    this.setState(
      {
        additionalFields: [...this.state.additionalFields, item]
      }
    );
  };
    render() {
           return( <DynamicTable
                     columns={[
                                { dataFieldId: "date", label: "Date", addRow: true },                            
                                { dataFieldId: "AD", label: "" } 
                      ]}
                            rows={this.state.additionalFields}
                            addRow={this.handleAddRow}
                            />);

     }
  }

}

DynamicTable Component

import React, { Component } from "react";
import DatePicker from "react-date-picker";

class DynamicTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
     date: new Date();
    };
  }
  handleDatePicker = (value, name, field, row) =>{
    //this.props.handleInputChange(value, field, row);
    this.setState({ [name] : value });
  }

renderRowData = (column, row, col, index, rowId, rowleng) => {
    if (column.addRow) {
      return (
        <td key={`tableview-td-${rowId}-${index}`}>
          {column.dataFieldId==="date" ?  
            <DatePicker  
            locale = "en-GB"
            className="datepicker"
            name={"date_"+rowId}
            onChange={(e)=>this.handleDatePicker(e, "date_"+rowId , column.dataFieldId, row)}
            value={this.state.date}
            /> 
          :"Loading"}

        </td>
      );
    }

  tableHeaders = () => (
    <thead>
      <tr>
        {this.props.columns.map((column, index) => {
          return <th key={`tableview-th-${index}`}>{column.label}</th>;
        })}
      </tr>
    </thead>
  );
  tableBody = () => {
    var rowleng = this.props.rows ? this.props.rows.length : 0;
    return (
      <tbody>
        {this.props.rows.map(row => {
          let index = row.id;
          const rowId = `row_${index}`;
          return (
            <tr key={`tableview-tr-inner-${index}`} id={rowId}>
              {this.props.columns.map((column, index) => {
                const col = column.dataFieldId.replace(/\s/g, "");
                return this.renderRowData(
                  column, row, col,  index, rowId, rowleng
                );
              })}
            </tr>
          );
        })}
      </tbody>
    );
  };
  renderRowData = (column, row, col, index, rowId, rowleng) => {
    if (column.addRow) {
      return (
        <td key={`tableview-td-${rowId}-${index}`}>
          <input
            type="text"
            defaultValue={row[column.dataFieldId]}
            placeholder={
              column.dataFieldId.charAt(0).toUpperCase() +
              column.dataFieldId.slice(1)
            }          
          />
        </td>
      );
    }
    if (col === "AD") {
      return (
        <td key={`tableview-td-${rowId}-${index}`}>
          <img
            className="addBtn1"
            onClick={this.props.addRow}
            src={"/assets/icons/ic_add_blue.png"}
          />
        </td>
      );
    }
    return <td key={`tableview-td-${rowId}-${index}`}>{row[col]}</td>;
  };
  render() {
    return (
      <React.Fragment>
        <div className="dynamicTable">
          <table>
            {this.tableHeaders()}
            {this.tableBody()}
          </table>
        </div>
      </React.Fragment>
    );
  }
}

export default DynamicTable;

Answer 1

Вы можете передать настроенный инструмент выбора даты своему дочернему компоненту

        state = {
             date: new Date(),
         }            

        onChange = date => this.setState({ date })

        <DatePicker
          onChange={this.onChange}
          value={this.state.date}
        />