如何在按钮上添加日期选择器单击反应

Question

我想知道如何在单击按钮时以datepicker作为字段创建动态行。 需要在单击按钮时动态创建行，单击时生成行。 但是日期选择器不起作用。 但是我需要添加一个字段作为Datepicker如何在 reactjs 中做到这一点

我有动态表组件，它创建带有字段的行，用于主页

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