从图标 onClick

问题描述

我有一个使用 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 上找到了一个帖子，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 日历的“反应方式”是什么？谢谢。

解决方法

事实证明，使用 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>标签。然后我在 componentDidMount() 中实例化了 Pikaday 日历，以便渲染操作已经完成，允许 Pikaday() 构造函数准备好绑定到 ref 字段。在 Pikaday 构造函数的参数中，将 field 参数与 this.fieldRef.current 链接，以便 Pikaday 绑定到 ref 的当前实例。