React.js中TextInput能否添加垂直滚动？及替代方案咨询

要是TextInput搞不定滚动需求，换这些组件就行：

• 原生textarea：HTML自带的<textarea>，给它设个固定高度，内容超了自动出滚动条，直接用就行：

<textarea 
  style={{ height: '200px', overflowY: 'auto' }}
  value={你的内容}
  onChange={处理输入的函数}
/>

• 可编辑div：把普通div设成contenteditable="true"，再用CSS控制高度和滚动，适合需要富文本编辑的场景：

<div
  contentEditable
  style={{ height: '200px', overflowY: 'auto', border: '1px solid #ccc', padding: '8px' }}
  onInput={处理输入的函数}
/>

• 第三方UI组件：像Material-UI的TextField（开启multiline属性）、Ant Design的Input.TextArea，这些现成组件自带滚动，不用自己折腾样式：

// Ant Design 示例
import { Input } from 'antd';

<Input.TextArea rows={6} />

另外你也可以试试给现有的TextInput加样式，比如固定高度和overflowY: auto，再开启多行模式，说不定能解决：

<TextInput
  style={{ height: '200px', overflowY: 'auto' }}
  multiline
  numberOfLines={10}
/>

内容的提问来源于stack exchange，提问作者Dhaval Parmar