如何在按钮单击反应 js 上添加 DatePicker

Question

我想知道如何在单击按钮时使用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}
                            />);

     }
  }

}

动态表格组件

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