Question

我正在使用一个名为react-input-autosize的组件。我面临的问题是，它不会在调整视口大小时调整输入的大小，因此，我将不希望手动挂钩到组件方法并运行copyInputStyles()和updateInputWidth()。

React很新，所以不知道如何实现。您可以通过inputRef公开输入，但这对我没有帮助吗？

我当前的简化测试用例看起来像这样，对如何运行组件方法的任何指示都感到满意。

    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}
          />
        );
      }
    }

Answer 1

""" Comments """"回调is referring to the html input element，而不是AutosizeInput组件。通过inputRef={node => this.inputRef = node}属性传递引用以访问组件的方法。

ref

在React

1 个答案: