1

我有一个应用程序React Pikaday，它是一个 JS 日历插件，它添加了一个弹出日历并绑定到一个 HTML<input>标记。既然在 中React，就调用包装器组件<DatePicker>。源代码

我还需要在输入框中添加一个小 FontAwesome 日历图标。但是因为这<DatePicker>是一个日期输入字段，所以我不能将日历图标添加为文本值。目前，我将<i>图标定位在<DatePicker>组件之后，然后应用填充使其稍微向后移动。

我的render()功能看起来像

<DatePicker>
    format="MM/DD/YYYY"
    value={this.state.date}
    onOpen={this.handleCalendarOperations}
    onDraw={this.handleCalendarOperations}
    onChange={this.handleCalendarOperations}
</DatePicker>

<i className="fa fa-calendar" id="CalculatorCalendar" title="Toggle Calendar"></i>

但是，也需要在图标上单击操作来打开日历。但是日历功能绑定到输入字段，所以我无法访问较低级别的功能。我在 SO 上找到了一个帖子，Triggering Pikaday date picker script on input field and icon，解决方案基本上是在<i>标签上添加一个 ID 值，我这样做了，然后使用以下

document.getElementById("CalculatorCalendar").addEventListener("click", function(){
    picker.show();
});

触发 Pikaday 日历。但是，问题在于这是 React。并且链接的解决方案需要在 vanilla JS 中实例化一个新的 Pikaday 实例。这就是它的picker.show()来源。该解决方案使用一个new Pikaday()实例并调用picker.show()它。

我需要做这个解决方案所做的事情，但是在 React 中。通过单击相关图标打开我的 DatePicker 日历的“反应方式”是什么？谢谢。

4

1 回答 1

1

事实证明，在 Pikaday 周围使用第三方组件包装器隐藏了太多我需要访问的抽象，比如 Pikaday.show()函数。所以我最终重构了我的代码以使用 Pikaday 的 vanilla JS 实现，然后修改了我最初帖子中的链接解决方案，以便它可以与React.createRef().

constructor(props){
    this.fieldRef = React.createRef(),
}

componentDidMount(){
    this.pikaday = new Pikaday({
            field: this.fieldRef.current,
            format: 'MM/DD/YYYY',
            onOpen: this.handleCalendar,
            onDraw: this.handleCalendar,
            onChange: this.changeColors
    });
}

render(){
    return(
        <input 
            type="text" 
            id="datepicker" 
            ref={this.fieldRef} 
            value={this.state.date}
        ></input>
        <i class="fa fa-calendar" onClick={() => this.pikaday.show()} />
    );
}

fieldRef 是 Pikaday 用来引用它绑定的元素的，因此您在应用程序构造函数中初始化引用，并将this.fieldRef其作为ref属性添加到<input>标签中。然后我实例化了 Pikaday 日历，componentDidMount()因此渲染操作已经完成，允许Pikaday()构造函数ref准备好绑定到的字段。并在 Pikaday 构造函数的参数中，将field参数链接到，this.fieldRef.current以便 Pikaday 绑定到 ref 的当前实例。

于 2021-04-14T21:49:38.727 回答