我正在构建一个 colored颜色 生成器，我注意到如果您只编写代码(例如:C4C4C4)而不添加"#"，则不会发生任何事情.
我希望它能够工作，即使用户忘记添加"#".
也许是让代码在单击"提交"后添加它.
function App() {
const [color, setColor] = useState("");
const [error, setError] = useState(false);
const [list, setList] = useState(new Values("#C4C4C4").all(10));
const handleSubmit = (e) => {
e.preventDefault();
try {
let colors = new Values(color).all(10);
setList(colors);
} catch (error) {
setError(true);
console.log(error);
}
};
return (
<>
<Navbar />
<section className="container">
<form onSubmit={handleSubmit}>
<input
type="text"
value={color}
onChange={(e) => setColor(e.target.value)}
placeholder="#C4C4C4"
className={`${error ? "error" : null}`}
/>
<button className="btn" type="submit">
Submit
</button>
</form>
</section>
<section className="colors">
{list.map((color, index) => {
return (
<SingleColor
key={index}
{...color}
index={index}
hexColor={color.hex}
/>
);
})}
</section>
<Footer />
</>
);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>