React中type为date的Input组件值变更无法显示问题排查

核心问题原因 #

你当前的代码把日期输入框的初始值硬编码在了**常量数组inputsFields**中，而非绑定到组件的状态（state）上。当选择新日期时，哪怕onChange触发了逻辑执行，Input组件接收的value依然是常量里的固定值"2023-01-01"，所以界面完全不会同步显示新选择的日期。

修复步骤 #

要解决这个问题，需要将表单数据托管到组件的状态中，让Input组件的value与状态绑定，而非直接使用常量里的初始值：

• 从inputsFields提取初始值，创建组件级的表单状态
• 修正onChange逻辑，确保选择新日期时正确更新对应字段的状态值
• 让Input的value读取状态中的值，而非常量里的固定值

修改后的完整代码示例 #

表单组件（使用Input的父组件）

import { useState } from 'react';
import { Input } from './Input';
import { inputsFields } from './inputsFields';

const UserForm = () => {
  // 从常量数组初始化表单状态
  const [formData, setFormData] = useState(() => {
    return inputsFields.reduce((data, field) => {
      data[field.name] = field.value || '';
      return data;
    }, {});
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    // 浅拷贝原状态，更新对应字段的值
    setFormData(prevState => ({ ...prevState, [name]: value }));
  };

  return (
    <form>
      {inputsFields.map(input => (
        <div key={input.id}>
          <label htmlFor={input.name}>{input.label}</label>
          <Input
            name={input.name}
            type={input.type}
            id={input.name}
            required={input.required}
            onChange={handleInputChange}
            // 读取状态中的值，而非常量里的value
            value={formData[input.name] || ''}
            disabled={input.disabled}
          />
        </div>
      ))}
    </form>
  );
};

export default UserForm;

Input组件（无需修改）

export const Input = ({ name, type, required, onChange, value, disabled }) => {
  return (
    <input
      name={name}
      type={type}
      id={name}
      required={required}
      onChange={onChange}
      value={value}
      disabled={disabled}
    />
  );
};

常量数组inputsFields（保留初始值）

export const inputsFields = [
   {
    id: 5,
    name: "birthday",
    type: "date",
    label: "Birthday",
    required: true,
    value: "2023-01-01",
  },
  {
    id: 7,
    name: "telephone",
    type: "tel",
    label: "telephone",
    required: true,
  },
  {
    id: 8,
    name: "mail",
    type: "email",
    label: "email",
    required: true,
  },
];

修复原理 #

React通过状态变化触发组件重新渲染。当选择新日期时，handleInputChange会更新formData状态，React检测到状态变化后会重新渲染Input组件，此时Input读取的是状态中最新的日期值，界面自然同步更新。而之前的代码直接使用常量值，状态变化无法影响固定值，所以界面无反应。

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