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

Question

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

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

这是渲染（）代码：

<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”只包含日期 object。 看来 Datetime 不支持“名称”返回？

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

考虑这样做：

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

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

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

Answer 1

你可以做的就是给你的 function 传递一个额外的参数：

        <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) function 中重用此参数：

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

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

日期更改时的回调触发。 如果输入中的日期有效，则回调接收选择的时刻 object 作为唯一参数。 如果输入中的日期无效，则回调接收输入的值（字符串）。