React实现点击Add按钮为简历门户动态新增工作经历textarea

所有逻辑可直接在 UserDetails 子组件内完成，无需修改父组件代码，核心是通过state控制额外工作经历输入框的渲染数量：

修改后的子组件完整代码（src -> Routes -> UserForm -> Components -> UserDetails -> index.js） #

import React, { useState } from 'react'
import './style.scss';
import { Row, Col } from 'react-bootstrap'

const UserDetails = () => {
  // 定义state记录额外新增的工作经历输入框数量，初始为0
  const [extraWorkExp, setExtraWorkExp] = useState(0)

  // 点击Add按钮触发：新增一个输入框
  const handleAddWorkExp = () => {
    setExtraWorkExp(prev => prev + 1)
  }
    
  return (
    <>
      <div className='UserDetails'>
        <Row>
          <Col lg='6'>
            <div className='persnlInfo'>
              <h4>
                Personal Information
              </h4>
              <p>Your Name</p>
              <input type="text" placeholder="Enter here" />
              <p>Your Contact</p>
              <input type="text" placeholder="Enter here" />
              <p>Your Address</p>
              <textarea className='formAddress' rows="5" cols="10" placeholder="Enter here" />
              <p id='impLinks'>Important Links</p>
              <p>Facebook</p>
              <input type="text" placeholder="Enter here" />
              <p>Instagram</p>
              <input type="text" placeholder="Enter here" />
              <p>Linkedin</p>
              <input type="text" placeholder="Enter here" />
            </div>
          </Col>

          <Col lg='6'>
            <h4>
              Professional Information
            </h4>
            <p>Objective</p>
            <textarea className='formObjective' rows="5" cols="10" placeholder="Enter here" />
            <p>Work Experience</p>
            {/* 原有第一个工作经历输入框 */}
            <textarea className='formObjective' rows="3" cols="10" placeholder="Enter here" />
            {/* 遍历渲染额外新增的输入框，不带label */}
            {Array.from({ length: extraWorkExp }).map((_, index) => (
              <textarea 
                key={index} 
                className='formObjective' 
                rows="3" 
                cols="10" 
                placeholder="Enter here" 
                style={{marginTop: '16px'}} // 可选：增加上边距和原有输入框保持间距，也可以写在scss里
              />
            ))}
            <div className='addButton'>
              <input type='button' id='addWrkExp' value='Add' onClick={handleAddWorkExp} />
            </div>
          </Col>
        </Row>
      </div>
    </>
  )
}
export default UserDetails;

补充说明 #

如果后续需要收集所有工作经历输入框的内容提交，可以把state调整为数组结构，每个元素存储对应输入框的value，方便双向绑定取值，示例如下：

// 初始化state，默认包含第一个输入框的空值
const [workExpList, setWorkExpList] = useState([''])

// 新增输入框
const handleAddWorkExp = () => {
  setWorkExpList(prev => [...prev, ''])
}

// 输入框内容变更时更新对应位置的value
const handleExpChange = (index, value) => {
  const newList = [...workExpList]
  newList[index] = value
  setWorkExpList(newList)
}

// 渲染时遍历workExpList
{workExpList.map((item, index) => (
  <textarea
    key={index}
    value={item}
    onChange={e => handleExpChange(index, e.target.value)}
    className='formObjective'
    rows="3"
    cols="10"
    placeholder="Enter here"
  />
))}

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