在Next.js中如何获取SubjectInput组件内的输入框值？

我正在用Next.js开发页面，页面代码如下：

"use client"

import SubjectInput from "../../../../components/subjectsInput"

export default function Page()
{
        let inputs = []
        for (let i = 0; i < numberOfInputsGiven; i++) {
            inputs.push(<SubjectInput key={i}/>)
        }

        return(
            <>
                <form>
                     <>
                        {inputs}
                     </>
                     <button type="submit">OK</button>
                </form>
            </>
        )
}

我用SubjectInput组件生成输入字段，组件代码如下：

export default function SubjectInput(){
    return(
        <div>
            <div>
                <label>Name</label>
                <input type="text"  placeholder="Enter subject's name" required />
            </div>
            <div>
                <label>From</label>
                <input type="time" placeholder="Enter subject's starting time" required />
            </div>
            <div>
                <label>To</label>
                <input type="time" placeholder="Enter subject's ending time" required />
            </div>
        </div>
    )
}

现在需要获取SubjectInput组件内所有输入框的值，该怎么做？

方案一：受控组件（父组件统一管理状态） #

让父组件控制所有输入的状态，子组件通过回调把输入值传递回去，适合需要实时处理输入的场景。

1. 改造SubjectInput组件 #

给组件传入状态数据和变更回调，让输入框变成受控状态：

export default function SubjectInput({ subjectData, onChange, index }) {
    const updateField = (field, value) => {
        onChange(index, { ...subjectData, [field]: value });
    };

    return(
        <div>
            <div>
                <label>Name</label>
                <input 
                    type="text" 
                    placeholder="Enter subject's name" 
                    required 
                    value={subjectData.name || ""}
                    onChange={(e) => updateField("name", e.target.value)}
                />
            </div>
            <div>
                <label>From</label>
                <input 
                    type="time" 
                    placeholder="Enter subject's starting time" 
                    required 
                    value={subjectData.from || ""}
                    onChange={(e) => updateField("from", e.target.value)}
                />
            </div>
            <div>
                <label>To</label>
                <input 
                    type="time" 
                    placeholder="Enter subject's ending time" 
                    required 
                    value={subjectData.to || ""}
                    onChange={(e) => updateField("to", e.target.value)}
                />
            </div>
        </div>
    )
}

2. 改造父页面组件 #

初始化状态数组管理所有科目数据，处理表单提交逻辑：

"use client"

import { useState } from 'react';
import SubjectInput from "../../../../components/subjectsInput"

export default function Page() {
    // 假设numberOfInputsGiven是已知的数量，比如3
    const numberOfInputsGiven = 3;
    // 初始化每个科目的空状态
    const [subjects, setSubjects] = useState(
        Array(numberOfInputsGiven).fill({ name: "", from: "", to: "" })
    );

    const updateSubject = (index, newData) => {
        const updatedSubjects = [...subjects];
        updatedSubjects[index] = newData;
        setSubjects(updatedSubjects);
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        // 这里就能拿到所有输入的科目数据
        console.log("所有科目信息：", subjects);
        // 后续可以提交到API或者做其他处理
    };

    return(
        <>
            <form onSubmit={handleSubmit}>
                {subjects.map((subject, index) => (
                    <SubjectInput 
                        key={index} 
                        index={index}
                        subjectData={subject} 
                        onChange={updateSubject} 
                    />
                ))}
                <button type="submit">OK</button>
            </form>
        </>
    )
}

方案二：用FormData直接读取表单值 #

如果不需要实时处理输入，可通过给输入框加命名，提交时直接解析FormData，代码更简洁。

1. 改造SubjectInput组件 #

给每个输入框添加带索引的name属性：

export default function SubjectInput({ index }) {
    return(
        <div>
            <div>
                <label>Name</label>
                <input 
                    type="text" 
                    name={`subjects[${index}].name`}
                    placeholder="Enter subject's name" 
                    required 
                />
            </div>
            <div>
                <label>From</label>
                <input 
                    type="time" 
                    name={`subjects[${index}].from`}
                    placeholder="Enter subject's starting time" 
                    required 
                />
            </div>
            <div>
                <label>To</label>
                <input 
                    type="time" 
                    name={`subjects[${index}].to`}
                    placeholder="Enter subject's ending time" 
                    required 
                />
            </div>
        </div>
    )
}

2. 改造父页面组件 #

在提交时解析FormData获取所有值：

"use client"

import SubjectInput from "../../../../components/subjectsInput"

export default function Page() {
    const numberOfInputsGiven = 3;

    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        // 解析成科目数组
        const subjects = [];
        for (let i = 0; i < numberOfInputsGiven; i++) {
            subjects.push({
                name: formData.get(`subjects[${i}].name`),
                from: formData.get(`subjects[${i}].from`),
                to: formData.get(`subjects[${i}].to`)
            });
        }
        console.log("所有科目信息：", subjects);
        // 后续处理逻辑
    };

    return(
        <>
            <form onSubmit={handleSubmit}>
                {Array.from({ length: numberOfInputsGiven }).map((_, index) => (
                    <SubjectInput key={index} index={index} />
                ))}
                <button type="submit">OK</button>
            </form>
        </>
    )
}

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