Javascript 在reactjs中处理多个日期选择器

我已经实现了datepicker和timepicker，每行都有添加、删除按钮。当我单击add时，将添加新行，delete将删除行

我有代码链接https://codesandbox.io/s/zen-water-tfyoz?fontsize=14&hidenavigation=1&theme=dark 但是如何处理多个日期选择器和时间选择器的状态

更改日期时，它不会反映字段中的更改。

---

所以问题出在renderRowData函数中：

<td key={`tableview-td-${rowId}-${index}`}>
  {column.dataFieldId === "pickdate" ? (
    <DatePicker
      locale="en-GB"
      className="datepicker"
      name={"pickdate_" + rowId}
      onChange={e =>
        this.handleDatePicker(
          e,
          "pickdate_" + rowId,
          column.dataFieldId,
          row
        )
      }
      value={this.state.pickdate}
    />
  )

wich表示您所在的州现在：

{
   ["pickdate_" + rowId]: value // where row is selected row
}

您需要更改日期选择器以访问如下值：

<td key={`tableview-td-${rowId}-${index}`}>
  {column.dataFieldId === "pickdate" ? (
    <DatePicker
      locale="en-GB"
      className="datepicker"
      name={"pickdate_" + rowId}
      onChange={e =>
        this.handleDatePicker(
          e,
          "pickdate_" + rowId,
          column.dataFieldId,
          row
        )
      }
      value={this.state["pickdate_" + rowId] || this.defaultPickDate} // this will take new selected value or default if there is none
    />
  )

---

工作示例：

日期字段的更改未反映在UI中的原因是，您将其作为受控组件实现。您正在根据状态中的相应值设置每个日期选择器的值，并在更改值时更新状态，它或多或少地有效地将组件与状态同步，而时间选择器在选择新时间时确实会在UI中更改，因为它们是作为不受控制的组件实现的。受控组件通常是最好的方法，但是日期组件不会随更改而更新，因为handleDatePicker函数中存在问题，正如Kaca992的回答所指出的

如果您不太了解受控组件与非受控组件，请参阅

至于如何处理多个日期选择器和时间选择器的状态，我个人建议您将它们存储为状态中的行数组。例如，这将是默认状态：

this.state = {
  rows: [
    {
      date: new Date(),
      start: moment(),
      end: moment(),
    }
  ]
}

数组中的每一行元素都对应于表中的一行，您可以使用array.map将每一行呈现为包含日期选择器、计时器选择器和按钮的组件，然后将数组索引和新值一起发送给onChange函数，以便在新状态中反映正确行的更改

---

这将需要重新编写DynamicDateTimePicker类，但逻辑将比当前的结构简单得多，可读性也更高。

Hi@kaca992，我需要一些帮助，我在home.js中添加了其他字段，启动时显示defaultpickdate，添加时应显示空字段，我试过改变。请帮忙

this.state = {
  rows: [
    {
      date: new Date(),
      start: moment(),
      end: moment(),
    }
  ]
}