React自定义Hook实现颜色表单报错，提交时颜色值为undefined

AI 小北

2026-8-5

React自定义Hook表单问题修复：undefined颜色值及属性警告

问题现象

实现自定义Hook时，表单提交后颜色代码显示undefined，控制台出现警告：Invalid attribute name: '0'。

错误原因

颜色输入未使用自定义Hook：colorProps直接通过useState获取，useState返回的是[值, 更新函数]，这里colorProps实际是字符串#000000。将字符串展开到<input>标签上时，React会把字符串的索引（如0、1）当作DOM属性名，触发无效属性警告。
错误访问属性：submit函数里的colorProps.value是错误写法——colorProps是字符串，根本不存在value属性，因此提交时显示undefined。

修复代码

将颜色输入也改用自定义useInput Hook，统一表单输入的处理逻辑：

import "./App.css";
import { useState } from "react";
function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  return [
    {
      value, 
      onChange: (e) => setValue(e.target.value)
    },
    () => setValue(initialValue)
  ]
}

function App() {
  const [titleProps, resetTitle] = useInput("");
  // 改用useInput处理颜色输入
  const [colorProps, resetColor] = useInput("#000000");
  const submit = (e) => {
    e.preventDefault();
    alert(`${titleProps.value}, ${colorProps.value}`);
    resetTitle();
    // useInput的reset函数无需传参，自动用初始值重置
    resetColor();
  };
  return (
    <form onSubmit={submit}>
      <input
        {...titleProps}
        type="text"
        placeholder="color title..."
      />
      <input
        {...colorProps}
        type="color"
      />
      <button>ADD</button>
    </form>
  );
}

export default App;