React中如何实现textarea存在内容时自动展开的效果

你可以通过给有内容的textarea新增专属样式类的方式实现需求，以下是两种可选实现方案：

方案1：固定展开高度（和现有聚焦展开效果保持一致） #

仅需修改2处代码即可实现：textarea只要有内容，无论是否失焦都保持展开状态，高度固定为150px。

1. 修改CSS样式 #

在原有CSS基础上新增has-content类的共同样式规则：

.dynamic-textarea {
  text-align: left;
  transition: all .3s ease;
  height: 60px;
}

/* 聚焦、有内容时都保持展开状态 */
.dynamic-textarea:focus,
.dynamic-textarea.has-content {
  height: 150px;
  width: 650px !important;
}

2. 修改DynamicWidthInput组件逻辑 #

在textarea的className判断中新增内容检测逻辑，有内容时自动添加has-content类：

// 仅展示修改部分的render逻辑
render() {
  const { id, placeholder, type, onChange, value, error, size } = this.props;
  if (type === "textarea") {
    return (
      <div style={{ display: "inline-block", verticalAlign: "top" }}>
        <textarea
          {/* 新增value非空判断，trim是为了过滤仅输入空格的情况 */}
          className={`input dynamic-input dynamic-textarea ${size} ${value?.trim() ? 'has-content' : ''}`}
          id={id}
          onChange={onChange}
          placeholder={placeholder}
          value={value}
          wrap="soft"
          maxLength="1000"
          {...this.props}
        />
        {error && <p className="help is-danger">{error.message}</p>}
      </div>
    );
  }
// 其余原有逻辑保持不变
}

方案2：自适应内容高度（高度随输入文本长度自动调整） #

如果需要实现高度随文本内容实时变化，不需要固定150px的高度，可以按以下方式修改：

1. 调整CSS样式 #

移除固定高度限制，仅保留最小高度和过渡效果：

.dynamic-textarea {
  text-align: left;
  transition: all .3s ease;
  min-height: 60px; /* 无内容时的最小高度 */
  height: auto;
  resize: none; /* 可选：禁止用户手动拖拽调整大小 */
}

.dynamic-textarea:focus,
.dynamic-textarea.has-content {
  width: 650px !important;
}

2. 新增组件高度适配逻辑 #

在组件的生命周期方法中新增高度自动计算逻辑：

class DynamicWidthInput extends React.Component {
  // 适配高度的公共方法
  adjustTextareaHeight = () => {
    const textareaDom = document.getElementById(this.props.id);
    if (!textareaDom || this.props.type !== 'textarea') return;
    // 先重置高度，再设置为滚动高度，实现自适应
    textareaDom.style.height = 'auto';
    textareaDom.style.height = `${textareaDom.scrollHeight}px`;
  }

  componentDidMount() {
    const { id, value } = this.props;
    resizable(document.getElementById(id), 16, value);
    // 新增：初始化时适配高度
    this.adjustTextareaHeight();
  }

  componentDidUpdate(prevProps) {
    const { id, value } = this.props;

    if (this.props.value !== prevProps.value) {
      resizable(document.getElementById(id), 16, value);
      // 新增：内容变化时适配高度
      this.adjustTextareaHeight();
    }
  }

  // render逻辑和方案1保持一致，保留has-content类的判断
}

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