如何在 ReactJS 中使用 TextareaAutosize 组件？

TextareaAutosize 组件是一个 ReactJS 的自适应文本框组件，它可以根据输入内容自动调整文本框的高度，省去了不必要的滚动条，提高了用户的体验。下面将介绍在 ReactJS 中如何使用 TextareaAutosize 组件。

安装

首先需要安装 react-textarea-autosize：

npm install react-textarea-autosize --save

使用

在 ReactJS 中使用 TextareaAutosize 组件非常简单。

import React, { Component } from 'react';
import TextareaAutosize from 'react-textarea-autosize';

class App extends Component {
  render() {
    return (
      <TextareaAutosize />
    );
  }
}

export default App;

以上代码在页面上渲染了一个自适应的文本框。当用户输入内容时，文本框的高度会根据内容自动增加。

属性

TextareaAutosize 组件还提供了几个常用的属性：

• defaultValue：设置文本框的默认值；
• placeholder：设置文本框的提示文字；
• onBlur、onChange、onFocus：文本框失去焦点、值变化、获得焦点时的回调函数；
• minRows、maxRows：设置文本框的最小行数和最大行数。

使用示例如下：

import React, { Component } from 'react';
import TextareaAutosize from 'react-textarea-autosize';

class App extends Component {
  handleBlur = (e) => {
    console.log('失去焦点', e.target.value);
  }

  handleChange = (e) => {
    console.log('值变化', e.target.value);
  }

  handleFocus = (e) => {
    console.log('获得焦点', e.target.value);
  }

  render() {
    return (
      <TextareaAutosize
        defaultValue="这是默认值"
        placeholder="请输入内容"
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onFocus={this.handleFocus}
        minRows={3}
        maxRows={6}
      />
    );
  }
}

export default App;

以上代码在页面上渲染了一个带默认值、提示文字、回调函数以及最小行数和最大行数限制的自适应文本框。用户在文本框中输入内容时，会触发 onChange 回调函数输出输入的内容，然后文本框的高度会根据输入的内容自动调整，最小高度为 3 行，最大高度为 6 行。当文本框失去焦点时，会触发 onBlur 回调函数输出最后输入的内容，当文本框获得焦点时，会触发 onFocus 回调函数输出当前文本框的值。