从图标 onClick 触发 React Pikaday Calendar

Question

我有一个使用 React Pikaday 的应用程序，它是一个 JS 日历插件，它添加了一个弹出日历并绑定到 HTML <input> 标签。因为它在 React 中，所以包装器组件称为 <DatePicker>。 Source code

我还需要在输入框中添加一个小小的 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上找到了一个post，，解决方法基本上是在<i>标签中添加一个ID值，我这样做了，然后使用下面的

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

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

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

Answer 1

事实证明，在 Pikaday 周围使用第三方组件包装器隐藏了太多我需要访问的抽象，例如 Pikaday .show() 函数。所以我最终重构了我的代码以使用 Pikaday 的普通 JS 实现，然后修改了我最初 post 的 linked 解决方案，因此它可以与 React.createRef().[=21= 一起使用]

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> 标签。然后我在 componentDidMount() 中实例化了 Pikaday 日历，因此渲染操作已经完成，允许 Pikaday() 构造函数有一个准备绑定的 ref 字段。并且在 Pikaday 构造函数的参数中，link field 参数带有 this.fieldRef.current 所以 Pikaday 绑定到 ref.

的当前实例

从图标 onClick 触发 React Pikaday Calendar

Trigger React Pikaday calendar from an icon onClick

html

javascript

datepicker

reactjs

pikaday