如何在React中实现用户输入颜色动态修改按钮样式

现有代码存在的核心问题 #

• 样式绑定语法错误：按钮的style属性配置中，错误地将name状态值嵌套为对象（写法为backgroundColor: { name }），此时React传递给按钮的背景色值是一个无实际颜色语义的JS对象，浏览器无法解析为有效CSS，样式自然不会生效。正确的写法是直接将状态值作为颜色属性的取值传入，不需要额外包裹一层JS对象的花括号。
• 按钮属性配置错误：原生<button>元素的合法type值为button/submit/reset，代码中设置的type="text"是文本输入框的属性值，不属于按钮的合法配置，会触发浏览器默认的表单提交行为，干扰页面交互。
• 提示文案语义偏差：输入框的placeholder设置为姓名提示，和“输入按钮颜色”的实际功能不匹配，容易误导用户。

可直接运行的修正后代码 #

import React, { useState } from "react";

function App() {
  // 语义化命名状态变量，降低后续维护成本
  const [color, setColor] = useState("white");

  function handleChange(event) {
    const inputValue = event.target.value.trim();
    setColor(inputValue);
  }

  return (
    <div className="container">
      <h1>{color}</h1>
      <input
        onChange={handleChange}
        type="text"
        placeholder="输入想要的按钮颜色（如red、#1677ff）"
      />

      <button 
        type="button" 
        style={{ backgroundColor: color }}
      >
        Submit
      </button>
    </div>
  );
}

export default App;

可选增强优化 #

如果要避免用户输入非法颜色值导致样式失效，可以在状态更新前增加合法性校验：

function handleChange(event) {
  const inputValue = event.target.value.trim();
  // 浏览器原生API判断输入值是否为合法CSS颜色
  if (CSS.supports("background-color", inputValue)) {
    setColor(inputValue);
  } else {
    // 非法值时回退到默认白色
    setColor("white");
  }
}

此时用户输入任意CSS支持的合法颜色关键字、十六进制色值、rgb/rgba格式颜色，按钮都会实时同步更新对应背景色。

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