Access to component methods in React

Question

I'm using a component called react-input-autosize. The issue I'm facing is that it won't resize the input on viewport resize, so I wan't to manually hook into the component methods and run copyInputStyles() and updateInputWidth().

Pretty new to React so don't know how to achieve this. You can expose the input via the inputRef, but that doesn't really help me no?

My current reduced test case looks like this, would be happy with any pointers on how to run the component methods.

    import React from 'react';
    import styled from '@emotion/styled';
    import AutosizeInput from 'react-input-autosize';
    import {throttle} from 'lodash';


    const StyledAutosizeInput = styled(AutosizeInput)`
      max-width: 100vw;
    `;

    export default class signUp extends React.Component {
      constructor (props) {
        super(props);
        this.inputRef = React.createRef();
      }

      componentDidMount() {
        console.log(this.inputRef); // outputs input node
        window.addEventListener('resize', this.resize);
        this.resize();
      }

      componentWillUnmount() {
        window.removeEventListener('resize', this.resize);
      }

      resize = throttle(() => {
        console.log('force resize');
      }, 100);

      render() {
        return (
          <StyledAutosizeInput
            inputRef={node => this.inputRef = node}
          />
        );
      }
    }

Avin Kavish · Accepted Answer · 2019-06-11 12:41:53Z

1

The inputRef={node => this.inputRef = node} callback is referring to the html input element and not the AutosizeInput component. Pass the ref via the ref prop to access the component's methods.

...

resize = throttle(() => {
    if (this.inputRef.current) {
      this.inputRef.current.copyInputStyles()
      this.inputRef.current.updateInputWidth()
    }
  }, 100);

  render() {
    return (
      <StyledAutosizeInput
        ref={this.inputRef}
      />
    );
  }

answered Jun 11, 2019 at 12:41

Avin Kavish

9,0872 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

INT Over a year ago

Haha, I actually tried with ref before, but upon inspecting the output I didn't even bother trying to run the method as they weren't showing up there. Thank you!

Collectives™ on Stack Overflow

Access to component methods in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related