如何让React表单卡片随textarea高度变化自动扩展以显示提交按钮

问题核心是.container-form设置了固定高度600px，搭配overflow:hidden会截断超出内容，导致卡片无法随内容自动扩展。按以下步骤修改即可解决：

1. 调整容器高度属性 #

修改Form.css中的.container-form样式，移除固定高度并改用最小高度，同时去掉溢出隐藏属性：

.container-form{
    position: relative;
    top: 60px;
    right: -60rem;
    /* 替换固定height为min-height，保证初始高度同时支持自动扩展 */
    min-height: 600px;
    width: 400px;
    padding: 40px;
    z-index: 100;
    /* 移除overflow:hidden，允许内容自然撑开容器 */
    /* overflow: hidden; */
}

2. 优化textarea高度表现（可选） #

如果希望textarea自身也能随内容自动增高，而非出现滚动条，可选择以下两种方案：

方案A：纯CSS实现（部分现代浏览器支持） #

修改textarea的CSS样式，去掉固定高度，启用垂直调整：

.container-form textarea[type='text']{
    border: 1px solid #b4b3cb;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    padding: 3px;
    font-size: 16px;
    /* 替换固定height为min-height */
    min-height: 8rem;
    font-family: Arial, Helvetica, sans-serif;
    /* 允许垂直调整高度 */
    resize: vertical;
    height: auto;
}

方案B：React状态控制（兼容性更好） #

通过监听输入事件动态计算textarea高度，确保在所有浏览器中生效：

import React, { useRef, useEffect } from 'react'
import '../../Components/utilities.css'
import './Form.css'

export default function Form() {
  const textareaRef = useRef(null)

  useEffect(() => {
    const adjustHeight = () => {
      if (textareaRef.current) {
        // 重置高度以计算真实内容高度
        textareaRef.current.style.height = 'auto'
        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`
      }
    }
    // 初始化调整高度
    adjustHeight()
    // 监听输入事件实时调整
    textareaRef.current?.addEventListener('input', adjustHeight)
    // 组件卸载时移除监听
    return () => textareaRef.current?.removeEventListener('input', adjustHeight)
  }, [])

  return (
    <div className='container-form card'>
        <h2>Request a Demo</h2>
                <form action="https://formsubmit.co/ccf63a53d8e3631e23be6f390b5c9d9d" method="POST" name="contact" >
                    
                    <input type="text" name="_honey" style={{display:'none'}}/>
                    <input type="hidden" name="_captcha" value="false"/>
                    <input type="hidden" name="_next" value="http://127.0.0.1:5500/index.html"/>

                    <div className="form-control">
                        <input type="text" name="name" placeholder="Full Name" required/>
                    </div>
                    <div className="form-control">
                        <input type="email" name="email" placeholder="Email" required id="email"/>
                    </div>
                    <div className="form-control">
                        <input type="tel" name="number" placeholder="Mobile Number" required/>
                    </div>
                    <div className="form-control">
                        <input type="text" name="country code" placeholder="Country Code" required/>
                    </div>
                    <div className="form-control">
                        <input type="text" name="tenative budget" placeholder="Tenative Budget" required/>
                    </div>
                    <div className="form-control">
                        <input type="text" name="company" placeholder="Company Name" required/>
                        
                    </div>
                    
                    <div className="form-control">
                        <textarea 
                            ref={textareaRef}
                            type='text' 
                            name="" 
                            className="description" 
                            placeholder='Please explain what kind of web application do you want to build.'
                        />
                    </div>
                    
                    <input type="submit" value="Send" className="btn btn-primary" ></input>
        </form>
    </div>
  )
}

效果验证 #

修改完成后，当textarea输入内容增多时，textarea会自动增高，容器.container-form也会随之扩展高度，提交按钮始终保持可见，不会被截断。

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