如何使用React创建自动增长-收缩输入？

使用React创建自动增长-收缩输入可以通过以下步骤实现：

首先，安装React和相关依赖。可以使用npm或yarn来安装React和React相关的库。
创建一个React组件，可以命名为AutoResizeInput。这个组件将负责处理输入框的自动增长和收缩。
在AutoResizeInput组件中，定义一个state来保存输入框的值和高度。可以使用useState钩子函数来创建state。
在组件的render方法中，使用一个textarea元素作为输入框。将输入框的值和高度与state中的值绑定。
使用CSS样式来设置输入框的初始高度和样式。可以设置输入框的高度为auto，这样输入框的高度将根据内容自动调整。
监听输入框的变化事件，当输入框的内容发生变化时，更新state中的值。
使用CSS样式来动态调整输入框的高度。可以使用textarea的scrollHeight属性来获取输入框内容的实际高度，并将其应用到输入框的样式中。
可以添加一些额外的功能，例如输入框的最大高度限制、输入框的最小高度限制等。

下面是一个示例代码：

import React, { useState } from 'react';

const AutoResizeInput = () => {
  const [value, setValue] = useState('');
  const [height, setHeight] = useState('auto');

  const handleChange = (event) => {
    setValue(event.target.value);
    setHeight(`${event.target.scrollHeight}px`);
  };

  return (
    <textarea
      value={value}
      style={{ height }}
      onChange={handleChange}
    />
  );
};

export default AutoResizeInput;

这个AutoResizeInput组件可以在需要自动增长和收缩输入框的地方使用。例如：

import React from 'react';
import AutoResizeInput from './AutoResizeInput';

const App = () => {
  return (
    <div>
      <h1>自动增长-收缩输入</h1>
      <AutoResizeInput />
    </div>
  );
};

export default App;

这样，当用户在输入框中输入内容时，输入框的高度将根据内容自动调整。