ReactJS：输入框初始为空、输出标签带预设值的组件传值问询

当前代码中，父组件App的useState默认值包含预设的姓名和年龄，导致子组件Child的输入框绑定该值后直接显示预设内容，不符合输入框初始为空的需求。同时需要保证输出标签（父组件内的h4及Child2）初始显示预设数据，输入后同步更新为表单值。

解决方案 #

拆分预设数据与表单状态，让表单状态初始为空，输出展示时优先使用表单输入值，无输入则回退到预设数据。

修改后的代码 #

App.js

import React, { useState } from "react";
import Child from "./components/Child";
import Child2 from "./components/Child2";

// 预设数据
const defaultUser = {
  name: "Surojit Manna",
  age: "23"
};

function App() {
  // 表单状态初始为空
  const [userInput, setUserInput] = useState({
    name: "",
    age: ""
  });

  // 输出展示逻辑：优先用表单输入值，为空则用预设数据
  const displayUser = {
    name: userInput.name || defaultUser.name,
    age: userInput.age || defaultUser.age
  };

  return (
    <React.Fragment>
      <Child user={userInput} setUser={setUserInput} />
      <h1>Getting From Parent Element</h1>
      <h4>Your name is:{displayUser.name}</h4>
      <h4>Your age is:{displayUser.age}</h4>
      <Child2 data={displayUser} />
    </React.Fragment>
  );
}
export default App;

Child.js

import React from "react";

const Child = ({ user, setUser }) => {
  const handleChange = (e) => {
    setUser((prev) => ({
      ...prev,
      [e.target.id]: e.target.value
    }));
  };

  return (
    <React.Fragment>
      <form>
        <label htmlFor="name">Name:</label>
        <input
          id="name"
          placeholder="Enter Name"
          value={user.name}
          onChange={handleChange}
        />
        <br />
        <label htmlFor="age">Age:</label>
        <input
          id="age"
          placeholder="Enter Age"
          value={user.age}
          onChange={handleChange}
        />
      </form>
    </React.Fragment>
  );
};
export default Child;

说明 #

• 预设数据单独存入defaultUser常量，与表单状态分离，避免影响输入框初始值。
• 表单状态userInput初始化为空对象，确保输入框默认显示为空。
• 定义displayUser对象处理输出逻辑：表单有输入时显示输入值，无输入时回退到预设数据。
• 移除了Child组件中不必要的表单事件处理函数，因为表单onChange无需阻止默认行为，且无提交按钮时onSubmit不会触发。

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