I would like to use a custom DatetimeEditor React component as a custom editor for a parent grid component. Part of this implementation requires access to the underlying input element for the Material-ui KeyboardDatePicker.
library versions: @material-ui/core: ^4.11.0 @material-ui/pickers: ^3.2.10 react: ^16.13.1 react-dom: ^16.13.1
Simplified DatetimeEditor component:
import React from 'react';
import { KeyboardDatePicker } from '@material-ui/pickers';
export default class DatetimeEditor extends React.Component {
constructor(props) {
super(props);
this.refs = React.createRef();
}
componentDidMount() {
this.refs.current.addEventListener('keydown', this.onKeyDown);
}
render() {
return (
<KeyboardDatePicker
// inputRef={this.refs}
// ref='input'
// inputRef={(input) => (this.refs = input)}
other properties....
inputProps={{
disableUnderline: true,
// ref: this.refs,
}}
/>
)
}
}
Error situation: In the componentDidMount method, this.refs is not being set to the inner input element of the KeyboardDatePicker component. The commented out lines of code in the render() section are what I have tried in various combinations.
I'm also aware that string refs are depreciated and that forwardRefs are an option but cannot find a relevant example implementation.