從圖標 onClick 觸發 React Pikaday 日歷

Question

我有一個使用React Pikaday的應用程序，這是一個 JS 日歷插件，它添加了一個彈出日歷並綁定到 HTML <input>標簽。 由於它在React中，因此包裝器組件稱為<DatePicker> 。 源代碼

我還需要在輸入框中添加一個小 FontAwesome 日歷圖標。 但是因為<DatePicker>是一個日期輸入字段，所以我不能將日歷圖標添加為文本值。 目前，我將<i>圖標定位在<DatePicker>組件之后，然后應用填充使其稍微向后移動。

我的render() function 看起來像

<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 日歷的“反應方式”是什么？ 謝謝。

Answer 1

事實證明，在 Pikaday 周圍使用第三方組件包裝器隱藏了太多我需要訪問的抽象，例如 Pikaday .show() function。 所以我最終重構了我的代碼以使用 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 的當前實例。