我是编码和React的新手.请听我说

Question

我想改变'left- innerTopBox'的颜色。我想我缺少一个handleChange函数和一个onChange。谢谢你的帮助。

import "./App.css";
import { useState } from "react";
function App() {
const [color, setColor] = useState({
color1: "#fff",
});
return (
<>
<div className="box--control">
<div className="big--leftBox">
left box
<div className="left--innerTopBox" value={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}
/>
</div>
<div className="inputs">
Color 2<input type="color" style={{ marginLeft: 10 }} />
</div>
</div>
</div>
</>
);
}
export default App;

Answer 1

试试这样:

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;

Answer 2

A<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 });

这将允许您为在同一状态对象上设置不同属性的多个输入重用相同的更改处理程序。

当然，这将在每次更改时更新它。例如，如果你输入"green"然后是5 &;color&;更新:

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