Recommended way to access native elements

[piotr-cz]

I'd like to use native Constraint validation and be able to call checkValidity and reportValidity methods on individual inputs.

For that I need to access native elements like input , textarea and so on.

Using a ref attribute on a react-mdc-web element doesn't work as it points to react-mdc-web component and ref attribute is not being passed further using { ...otherProps } (I recall this is a react constraint).

What about adding special attribute that will translate to ref on native element, like so:

<TextField
  nativeRef={ el => this.nativeInput = el }
/>

implementation in Textfield/Input.js could be

const Input = ({ multiline, nativeRef, ...otherProps }) => {
  const type = multiline ? 'textarea' : 'input';
  return createElement(type, { className: ROOT, ref: nativeRef, ...otherProps });
};