React中如何在颜色选择器变化时修改元素颜色？

你需要完成三个核心调整：添加颜色变化处理函数、给颜色输入框绑定onChange事件，同时修正目标元素的颜色设置方式（div元素没有value属性，需通过style设置颜色）。

修改后的完整代码如下：

import "./App.css";
import { useState } from "react";

function App() {
  const [color, setColor] = useState({
    color1: "#fff",
    color2: "#000" // 给第二个颜色添加默认值
  });

  // 通用颜色变化处理函数
  const handleColorChange = (e) => {
    const { name, value } = e.target;
    setColor(prevState => ({ ...prevState, [name]: value }));
  };

  return (
    <>
      <div className="box--control">
        <div className="big--leftBox">
          left box
          {/* 通过style设置元素背景色，同步选中的color1值 */}
          <div 
            className="left--innerTopBox" 
            style={{ backgroundColor: color.color1 }}
          >
            color here
          </div>
          <div className="left--innerBottomBox">code here</div>
        </div>

        <div className="big--rightBox">
          right box
          <div className="inputs">
            Color 1
            <input
              type="color"
              name="color1" // 增加name属性，匹配状态字段
              style={{ marginLeft: 10 }}
              value={color.color1}
              onChange={handleColorChange} // 绑定变化事件
            />
          </div>
          <div className="inputs">
            Color 2
            <input 
              type="color"
              name="color2"
              style={{ marginLeft: 10 }} 
              value={color.color2}
              onChange={handleColorChange}
            />
          </div>
        </div>
      </div>
    </>
  );
}
export default App;

关键修改说明：

• 新增handleColorChange函数：通过解构获取输入框的name和value，用函数式更新状态，确保状态修改的准确性，同时支持多个颜色输入框复用。
• 给颜色输入框添加name属性与onChange绑定：让输入框的变化能触发状态更新，name属性对应state中的字段，实现精准修改。
• 修正left--innerTopBox的颜色设置：使用style.backgroundColor将选中的颜色设为元素背景色，若需要修改文字颜色，替换为color: color.color1即可。
• 给color2添加默认状态值，避免未定义的情况。

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