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

Question

我已经实现了日期选择器和时间选择器，并在每行中添加、删除按钮。当我点击添加时，将添加新行，删除将删除行。

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

更改日期时，不会反射(reflect)字段的更改。 https://codesandbox.io/s/zen-water-tfyoz?fontsize=14&hidenavigation=1&theme=dark

Answer 1

所以问题出在你的 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}
    />
  )

对于值，您使用 this.state.pickdate，但是当值更改时，您可以使用以下方式设置它:

  handleDatePicker = (value, name, field, row) => {
    this.props.handleInputChange(value, field, row);
    console.log("data", value, "for", name);
    this.setState({ [name]: value });
  };

这意味着您现在的状态是:

{
   ["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
    />
  )

工作示例:https://codesandbox.io/s/funny-fog-1v9o3