React中如何获取多个动态输入框的独立值？

问题根源在于你当前用单个credit和sgpa字段存储所有学期的数据，所有动态输入框都绑定同一个状态值，所以会同步变化。需要把状态改成数组结构，每个数组元素对应一个学期的credit和sgpa数据。

修改后的完整组件代码 #

import React, { useState } from 'react'
import cal from './image/bgimg.jpg'

function Home() {
    // 调整状态结构：用semesters数组存储每个学期的学分和SGPA
    const [state, setState] = useState({
        semester: '',
        semesters: []
    })
    const [noOfSem, setNoOfSem] = useState([])

    const handleChange = (e) => {
        const { name, value, dataset } = e.target;
        const semIndex = parseInt(dataset.semIndex);
        // 复制原数组，修改对应学期的字段值
        const updatedSemesters = [...state.semesters];
        updatedSemesters[semIndex][name] = value;
        
        setState({ 
            ...state, 
            semesters: updatedSemesters 
        })
    }

    const handleClick = () => {
        const semesterCount = parseInt(state.semester);
        let sems = [];
        // 初始化对应数量的学期数据数组
        const initialSemesters = Array.from({ length: semesterCount }, () => ({ credit: '', sgpa: '' }));
        
        for (let index = 0; index < semesterCount; index++) {
            sems.push(index + 1);
        }
        setNoOfSem(sems);
        setState({
            ...state,
            semesters: initialSemesters
        })
    }

    const emptySemester=()=>{
        setState({
            ...state,
            semester:'',
            semesters: []
        })
        setNoOfSem([])
    }

    const handleCgpaSubmit=()=>{
        // 现在可以获取每个学期的独立数据
        console.log('所有学期数据:', state.semesters)
    }

    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <img src={cal} alt="" className='imgcal img-fluid' />
                </div>
                <div className="col-md-6">
                    <div className="col-md">
                        <div className="form1">
                            <div className="col-md formmain">
                                <input type="number" value={state?.semester} name='semester' onChange={(e) => setState({...state, semester: e.target.value})} placeholder='Enter Total Semester' />
                                {noOfSem.length===0?
                                <button type="button" className="btn btn-success btn333" onClick={handleClick}>Submit</button>
                                :
                                <button type="button" className="btn btn-success btn333" onClick={emptySemester}>Reset Semester</button>
                                }
                            </div>
                            <div className="col form2">
                                {noOfSem?.map((item, index) =>
                                    <>
                                        <div className="col-md seminpt">
                                            <label htmlFor="">Semester {index + 1}</label>
                                            {/* 用data-sem-index存储学期索引，绑定对应学期的credit值 */}
                                            <input 
                                                type="Number" 
                                                name='credit' 
                                                data-sem-index={index}
                                                value={state.semesters[index]?.credit || ''} 
                                                onChange={handleChange} 
                                                placeholder='Total Credit' 
                                            />
                                            {/* 同理绑定sgpa */}
                                            <input 
                                                type="Number" 
                                                name='sgpa' 
                                                data-sem-index={index}
                                                value={state.semesters[index]?.sgpa || ''} 
                                                onChange={handleChange} 
                                                placeholder={`SGPA sem${index + 1}`} 
                                            />
                                        </div>
                                    </>
                                )}
                                {noOfSem.length>0 && 
                                <button type="button" className="btn btn-success btn3334" onClick={handleCgpaSubmit}>Submit</button>
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Home

关键改动说明 #

1. 状态结构调整：

   • 把原来单独的credit和sgpa字段替换为semesters数组，每个数组元素是包含credit和sgpa的对象，对应一个学期的数据。

2. 输入框绑定逻辑修改：

   • 给每个动态输入框添加data-sem-index属性，标记当前输入框属于哪个学期（索引值）。
   • 输入框的value绑定到对应学期的credit或sgpa字段，确保每个输入框对应独立的状态值。

3. handleChange函数优化：

   • 通过dataset.semIndex获取当前输入框所属的学期索引，复制原数组并修改对应位置的字段值，避免直接修改原状态数组。

4. 初始化学期数据：

   • 在handleClick中，根据用户输入的学期数量，初始化semesters数组，每个元素初始化为{ credit: '', sgpa: '' }。

5. 提交逻辑更新：

   • handleCgpaSubmit中可以直接获取state.semesters数组，里面包含每个学期的独立学分和SGPA数据。

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