React中type为text的input组件不显示？已加闭合标签仍无效

输入框无法渲染的原因 #

你提供的代码里没有导出Input组件，这是导致组件无法被外部引用渲染的核心原因。React组件必须通过导出才能在其他文件中导入使用。

修正后的基础代码 #

import React, { useState } from "react";

function Input() {
  const [firstName, setUserInput] = useState('');
  
  function handleUserInput(e) {
    setUserInput(e.target.value);
  }

  return (
    <>
      <div>
        <form>
          <label>First Name: </label>
          <input id="firstName" type="text" onChange={handleUserInput} value={firstName}/>
          <input type="text"/>
        </form>
      </div>
      <div>
        <h1>First Name: </h1>
        <p>{firstName}</p>
      </div>
    </>
  );
}

// 必须导出组件才能被外部使用
export default Input;

实现多个文本输入框的优化方案 #

如果要添加多个输入框，推荐用单个对象类型的state来管理所有输入值，避免定义多个独立state，同时使用统一的事件处理函数：

import React, { useState } from "react";

function Input() {
  // 用对象统一管理多个输入字段
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: ''
  });
  
  // 统一处理所有输入框的变化
  function handleInputChange(e) {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  }

  return (
    <>
      <div>
        <form>
          <div>
            <label>First Name: </label>
            <input 
              name="firstName" 
              type="text" 
              onChange={handleInputChange} 
              value={formData.firstName}
            />
          </div>
          <div>
            <label>Last Name: </label>
            <input 
              name="lastName" 
              type="text" 
              onChange={handleInputChange} 
              value={formData.lastName}
            />
          </div>
          <div>
            <label>Email: </label>
            <input 
              name="email" 
              type="email" 
              onChange={handleInputChange} 
              value={formData.email}
            />
          </div>
        </form>
      </div>
      <div>
        <h2>输入预览</h2>
        <p>First Name: {formData.firstName}</p>
        <p>Last Name: {formData.lastName}</p>
        <p>Email: {formData.email}</p>
      </div>
    </>
  );
}

export default Input;

要点说明：

• 给每个输入框添加name属性，与state对象的键名对应
• 事件处理函数通过解构获取name和value，利用计算属性名更新对应字段
• 使用扩展运算符...prevState保留原有state的其他字段，避免覆盖

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