React通过props传递onSubmit处理函数及表单输入框不显示问题排查

问题根因 #

一共5处逻辑错误，直接导致输入框无法渲染、功能不符合预期：

• 条件渲染逻辑写反：初始状态下form.userName为空字符串（JS中空串是falsy值），原判断if (form.userName && form.password == null)永远无法命中，页面初始直接渲染展示用户名密码的空内容区块，根本不会返回带输入框的FormDetails组件。且该判断逻辑本身不成立，userName为真同时password为null/undefined的场景正常操作下不会出现。
• 表单提交事件属性名错误：React中表单原生提交事件的绑定属性为onSubmit，原代码写的自定义属性onSubmitHandler不会被React识别为事件绑定，点击提交按钮无法触发传入的处理函数。
• 输入框未做受控绑定：两个input标签没有绑定value属性和onChange事件，用户输入的内容不会同步到组件的form状态中，提交时无法获取到输入值。
• 状态更新逻辑错误：原代码把输入值同步的逻辑写在了提交事件里，且setForm({ [e.target.name]: e.target.value })会直接覆盖整个state对象（提交事件触发源是button按钮，本身没有name属性，还会直接把state改坏），正确的输入同步逻辑应该绑定在每个输入框的onChange事件上，更新时要保留原有state的其他字段。
• 未实现参数透传需求：原提交处理函数没有把用户名、密码作为参数传递的逻辑，不符合props传参的设计要求。

修复后完整代码 #

import { useState } from 'react';

function FormDetails(props) {
  const { form, setForm, onSubmitHandler } = props;
  return (
    <div>
      {/* 修正事件属性名为标准的onSubmit */}
      <form onSubmit={(e) => {
        e.preventDefault();
        // 提交时将用户名、密码作为参数传入处理函数
        onSubmitHandler(form.userName, form.password);
      }}>
        <input 
          type="text" 
          id="user-input" 
          name="userName"
          // 绑定受控值与输入同步事件
          value={form.userName}
          onChange={(e) => setForm(prev => ({...prev, userName: e.target.value}))}
        />
        <input 
          type="password" 
          id="password-input" 
          name="password"
          value={form.password}
          onChange={(e) => setForm(prev => ({...prev, password: e.target.value}))}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

function LoginForm() {
  const [form, setForm] = useState({
    userName: "",
    password: "",
  });
  // 提交处理函数，接收用户名、密码两个入参
  const onSubmitHandler = (userName, password) => {
    console.log("提交用户名：", userName, "提交密码：", password);
    // 此处可补充接口请求等业务逻辑，以下为提交后展示结果的状态更新
    setForm({userName, password});
  };

  // 修正条件判断：用户名或密码为空时渲染输入表单，二者都有值时渲染提交结果
  if (!form.userName || !form.password) {
    return <FormDetails form={form} setForm={setForm} onSubmitHandler={onSubmitHandler} />;
  }
  return (
    <div>
      UserName:{form.userName}
      <br/>
      Password:{form.password}
    </div>
  );
}

export default LoginForm;

修复说明 #

• 调整条件渲染判断规则：只要用户名、密码任意一个为空，就渲染带输入框的表单组件，两个值都存在时才渲染提交结果展示区块，解决初始不显示输入框的问题
• 修正表单事件绑定，将错误的自定义属性onSubmitHandler改为React标准的onSubmit事件属性
• 给两个输入框加受控绑定，输入时实时同步值到state，不会丢失输入内容
• 调整state更新逻辑，输入时用展开运算符保留原有state字段，避免单字段覆盖导致的状态异常
• 提交时直接从state取最新的用户名、密码，作为参数传入提交处理函数，符合props传参的设计要求

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