如何在React中限制TextInput输入行数？React Native多行输入限制问题求解

不生效根因 #

你当前代码无法限制行数的核心问题有两个：

• React Native 官方提供的 numberOfLines 属性仅代表初始展示行数，没有限制最大输入行数的作用，双端表现存在差异：安卓端仅控制默认展示高度，iOS端不配合样式限制也无法阻止输入内容超出
• 你给TextInput设置了固定height:40，覆盖了组件自身的高度适配逻辑，无法响应输入内容的高度变化

方案1：仅限制展示高度（超出内容可滚动查看） #

如果需求仅为输入框最高展示4行，内容超出后可滚动查看，仅调整样式即可：

import React, { Component } from 'react';
import { TextInput } from 'react-native';

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Write something' };
  }

  render() {
    return (
      <TextInput
        style={{
          borderColor: 'gray',
          borderWidth: 1,
          paddingHorizontal: 8,
          // 可根据实际字体大小、padding调整4行对应的高度值
          minHeight: 20,
          maxHeight: 80
        }}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
        multiline={true}
        numberOfLines={4}
      />
    );
  }
}

方案2：完全禁止输入超过4行（超出内容自动截断） #

如果需求为完全限制用户最多输入4行，手动换行、内容自动换行都不能超过限制，需要结合内容尺寸监听做截断处理：

import React, { Component } from 'react';
import { TextInput } from 'react-native';

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Write something' };
    // 单行文本高度，可根据实际字体、padding调整
    this.singleLineHeight = 20;
    this.maxLine = 4;
    this.maxInputHeight = this.singleLineHeight * this.maxLine;
  }

  handleContentSizeChange = (e) => {
    const contentHeight = e.nativeEvent.contentSize.height;
    const currentText = this.state.text;
    // 内容高度超过上限时，截断最后输入的字符
    if (contentHeight > this.maxInputHeight) {
      this.setState({
        text: currentText.slice(0, -1)
      })
    }
  }

  render() {
    return (
      <TextInput
        style={{
          borderColor: 'gray',
          borderWidth: 1,
          paddingHorizontal: 8,
          minHeight: this.singleLineHeight,
          maxHeight: this.maxInputHeight
        }}
        onChangeText={(text) => this.setState({text})}
        onContentSizeChange={this.handleContentSizeChange}
        value={this.state.text}
        multiline={true}
        numberOfLines={4}
      />
    );
  }
}

小提示 #

如果仅需要限制手动输入的换行次数，不需要限制自动换行的场景，可直接在onChangeText中判断换行符数量：

onChangeText={(text) => {
  // 超过3个换行符就是4行，阻止更新
  if(text.split('\n').length > 4) return
  this.setState({text})
}}

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