Question

我有一个自动调整大小的<textarea>，效果很好。我想允许用户使用车把手动调整其大小，此时，自动调整大小将被禁用。如何捕获onresize事件？根据@ types / react，onResize不可用。

这是我到目前为止所拥有的。

import React, { PureComponent } from 'react';

export default class MyInput extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      autosize: true,
      value: ''
    };
  }

  onChange(event) {
    const input = event.target;
    this.setState({ value: input.value });
    if (this.state.autosize) {
      const offset = input.offsetHeight - input.clientHeight;
      input.style.height = 'auto';
      input.style.height = input.scrollHeight + offset + 'px';
    }
  }

  onResize() {
    this.setState({ autosize: false });
  }

  render() {
    return <textarea value={this.state.value} onChange={e => this.onChange(e)} />;
  }
}

Answer 1

解决方案似乎是实验性的（截至11/2019）ResizeObserver类。目前已在Chrome，Firefox和Opera中实现，但在Edge或Safari中未实现。

export default class MyInput extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { 
      autosize: true,
      canResize: true,
      value: ''
    };

    this.inputRef = react.createRef();
  }

  componentDidMount() {
    if (window.ResizeObserver) {
      const input = this.inputRef.current,
        observer = new ResizeObserver(() => {
          this.setState({ autosize: false });
          observer.disconnect();
        });

      observer.observe(input);
    } else {
      this.setState({ canResize: false });
    }
  }

  // ...

  render() {
    return <textarea {...} ref={this.inputRef} 
             style={{ resize: this.state.canResize ? 'vertical' : 'none' }} />
  }
}

在React中检测<textarea>调整大小事件

1 个答案: