反应日期时间；我正在使用二合一组件，我如何分辨哪个是哪个？

如何解决反应日期时间；我正在使用二合一组件，我如何分辨哪个是哪个？

这是一个关于 react-datetime 的奇怪问题：为什么回调不允许返回“名称”？

我在日历调度程序上将 Daytime 用于“开始”和“结束”时间两次。但我想使用单个“onChange”事件来更新状态。问题是：Datetime onChange 只返回时间，它不返回名称或 ID 或任何方式让我识别哪个 Datetime 组件正在发送 onChange。

这是render()代码：

<CardSubtitle>Start Date:
  <Datetime 
    value = {this.state.start}
    onChange={this.handleChange}
    className = "dateTimeModule"
  />
</CardSubtitle>

<CardSubtitle>End Date:
  <Datetime 
    value = {this.state.end}
    onChange={this.handleChange}
    className = "dateTimeModule"
  />
</CardSubtitle>

这是我想使用的逻辑：

handleChange = (e) => {

  this.setState({
    bodyEdit: true,[e.target.name]:e.target.value
  })
};

但是“e”只包含日期对象。 Datetime 似乎不支持“名称”返回？

我很困惑，这似乎是一个明显的错过。我如何区分这些？我需要为每个函数编写单独的函数吗？

正在考虑这样做：

handleStartChange = (e) => {
  this.setState({
    startDate: e
  })
};

handleEndChange = (e) => {
  this.setState({
    endDate: e
  })
};

但这似乎是不必要的代码。

解决方法

您可以做的是将附加参数传递给您的函数：

        <CardSubtitle>Start Date:
          <Datetime 
            value = {this.state.start}
            onChange={(e) => this.handleChange(e,"start")}
            className = "dateTimeModule"
          />
        </CardSubtitle>

        <CardSubtitle>End Date:
          <Datetime 
            value = {this.state.end}
            onChange={(e) => this.handleChange(e,"end")}
            className = "dateTimeModule"
          />
        </CardSubtitle>

并在您的 handleChange(e,name) 函数中重用此参数：

  handleChange = (e,name) => {
    this.setState({
      bodyEdit: true,[name]:e
    })
  };

还要确保您用作“e”的库返回的是什么，它似乎不是一个经典事件，而是一个时刻对象：

日期更改时触发回调。回调接收到 选定的矩对象作为唯一参数，如果输入中的日期是 有效的。如果输入中的日期无效，则回调接收 输入的值（一个字符串）。