试试这样的方法：

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

function App() {
  const [color, setColor] = useState({
    color1: "#fff",
  });

  const handleChange = (e) => {
    setColor({ ...color, color1:  e.target.value });
  };

  return (
    <>
      <div className="box--control">
        <div className="big--leftBox">
          left box
          <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"
              style={{ marginLeft: 10 }}
              value={color.color1}
              onChange={handleChange}
            />
          </div>
          <div className="inputs">
            Color 2<input type="color" style={{ marginLeft: 10 }} />
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

<div>没有value：

<div className="left--innerTopBox" value={color.color1}>

假设你想使用 style？：

<div className="left--innerTopBox" style={{ color: color.color1 }}>

然后，您需要做的就是将状态值更新为您想要的任何值。举例来说：

<input
  type="color"
  style={{ marginLeft: 10 }}
  onChange={e => setColor({ color1: e.target.value })}
/>

这可以抽象为自己的函数，例如：

const handleChange = e => setColor({ color1: e.target.value });

以及：

<input
  type="color"
  style={{ marginLeft: 10 }}
  onChange={handleChange}
/>

还要注意，这会覆盖整个状态。如果在该状态对象中有多个属性，则可以保留它们并仅更新其中一个：

const handleChange = e => setColor({ ...color, color1: e.target.value });

当然，这也对属性名进行了硬编码。你可以通过给输入一个name来使其动态化：

<input
  type="color"
  name="color1"
  style={{ marginLeft: 10 }}
  onChange={handleChange}
/>

在函数中使用name：

const handleChange = e => setColor({ ...color, [e.target.name]: e.target.value });

这将允许您对在同一状态对象上设置不同属性的多个输入重用同一更改处理程序。
当然，请注意，这将在每次更改时更新它。例如，如果您键入“绿色”，则会有5个“颜色”更新：

• { color1: 'g' }
• { color1: 'gr' }
• { color1: 'gre' }
• { color1: 'gree' }
• { color1: 'green' }