Next.js+TypeScript项目中Input组件输入文本无法渲染问题

问题根源 #

你的handleInput函数依赖e.target.name匹配formData中的字段，但两个关键环节缺失了name属性的传递：

1. InputField组件的<input>标签未设置name属性
2. 父组件调用InputField时，未传递对应字段的name值

这导致fieldName始终为空，无法正确更新formData的对应字段，输入框绑定的value没有变化，所以输入内容无法渲染。

修复步骤 #

1. 更新InputField组件

修改组件的Props接口和<input>标签，添加name属性支持：

// InputField.tsx
interface InputFieldProps {
    type: string;
    label: string;
    value: string;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    name: string; // 新增name属性定义
}

const InputField: React.FC<InputFieldProps> = (props) => {
    return(
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
            <label>{props.label}</label>
            <input 
                type={props.type} 
                name={props.name} // 传递name属性到input标签
                value={props.value} 
                onChange={props.onChange} 
                style={{ color: "black" }}
            />
        </div>
    )
}

export default InputField;

2. 修改父组件调用InputField的代码

给每个InputField传递对应的name值，匹配formData中的字段：

// page.tsx
<form method="POST" action={url} onSubmit={submitForm}>
  {/* 给每个InputField添加name属性 */}
  <InputField type="text" label="Nome" name="name" value={formData.name} onChange={handleInput} />
  <InputField type="text" label="Cargo" name="position" value={formData.position} onChange={handleInput} />
  <InputField type="text" label="Email" name="email" value={formData.email} onChange={handleInput} />

  <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
      <button type="submit" style={{ padding: "10px 20px", backgroundColor: "#007bff", color: "#fff", border: "none", borderRadius: "5px", cursor: "pointer" }}>Enviar</button>
    </div>
</form>

验证 #

修改完成后，输入内容时handleInput能正确获取对应字段的name，formData会被正确更新，输入框的value随之变化，输入内容就能正常渲染了。

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