1

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

我在日历调度程序上使用 Daytime 两次作为“开始”和“结束”时间。但我想使用单个“onChange”事件来更新状态。问题是：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”只包含日期对象。看来 Datetime 不支持“名称”返回？

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

考虑这样做：

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

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

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

4

1 回答 1

2

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

        <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”的库返回的内容，它似乎不是经典事件，而是一个时刻对象：

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

于 2021-01-26T07:56:06.053 回答