React JS日期选择器的多个实例

  • Z时代
  • 2024-01-10
  • 分类：问答

如果我使用datepicker的多个实例，则在更新react-datepicker上的日期时遇到问题。

日期选择器组件：

<DatePicker
  selected={this.state.from}
  onChange={this.changeDate.bind(this)}
/>

在变更处理程序上：

changeDate(date) {
    this.setState({
        from : date
    });
}

如果我仅使用一个实例，这似乎很好用，但是当我添加多个实例时，我必须为每个新创建的日期选择器组件创建单独的onchange处理程序。我正在寻找的是一种只编写一个onchange处理函数并在同一函数中处理多个datepicker实例的更改事件的方法。

回答：

您可以使用对象field状态将每个日期值存储在属性中

this.state = {
    fields: {}
}
handleDateChange = (dateName, dateValue) => {
    this.setState({
        fields: {
            ...this.fields,
            [dateName]: dateValue
        }
    })
}
// IN RENDER
<ReactDatepicker 
    value={this.fields["dateStart"]}
    onChange={(value) => handleDateChange("dateStart", value)}
/>

以上是 React JS日期选择器的多个实例 的全部内容， 来源链接： utcz.com/qa/426516.html

回到顶部