import { use state } from 'react';
import React from 'react';
import './style.css';
export default function Div() {
const [data, set data] = useState('green');
return (
<div style={{ 'background-color': data }}>
{data}
<button on Click={() => setData('red', 'orange')}>state click
);
}
uj5u.com熱心網友回復：
首先=>您應該像這樣洗掉單詞“set”和“data”之間的空格：
const [data, setData] = useState('green');
樣式屬性中的第二個 => 只是第二個引數是一個字串，但在這種情況下，您必須使用反引號（`）來使用“模板文字”，如下所示：
<div class="sec" style={{ background-color: `${data}`}}>
uj5u.com熱心網友回復：
我已經修復了您代碼中的拼寫錯誤和錯誤，它似乎作業正常。
import { useState } from "react";
import React from "react";
import "./style.css";
export default function Div() {
const [data, setData] = useState("green");
return (
<div class="sec" style={{ "background-color": data }}>
<button onClick={() => setData("orange")}>state click</button>
</div>
);
}
單擊按鈕時它會將背景顏色更改為橙??色，但我仍然不明白，您是否要根據顏色陣列更改背景顏色？如果是這樣，您可以使用 Math.random 來執行此操作，每次單擊都會從顏色陣列中生成一個隨機項。
import { useState } from "react";
import React from "react";
import "./style.css";
export default function Div() {
const [data, setData] = useState("green");
const handleColorChange = () => {
const colors = ["orange", "green", "red", "black"];
var colorItem = colors[Math.floor(Math.random() * colors.length)];
setData(colorItem);
};
return (
<div class="sec" style={{ "background-color": data }}>
<button onClick={() => handleColorChange}>state click</button>
</div>
);
}
uj5u.com熱心網友回復：
這是簡短的解釋
第一：狀態用于存盤發生變化的事物。
顏色陣列不會改變，所以不要將它存盤在狀態中。
選定的顏色會發生變化，因此請將其存盤在狀態中。在這種情況下，您可以通過使用陣列中顏色的索引來做到這一點。
接下來，當顏色發生變化時，您要選擇下一個。這只是增加索引的問題。然而，當你走到盡頭時，你可能想要回圈回來。所以檢查一下。
第三，既然你只想要一個按鈕，那就只創建一個按鈕。不要在那里回圈顏色陣列。
使用狀態中的值來分配背景顏色。
onclick在onClick反應。
只需傳遞設定 nextColor 的函式。它不需要任何論據。
最后，如果你想要一個 HTML 按鈕元素，那么它就是 . 以大寫字母開頭的 JSX 名稱意味著您正在使用一個組件。有很多第三方 Button 組件，但您沒有匯入任何組件。嘗試在這里使用將遞回地使用您剛剛創建的組件。
import React, { useState } from "react";
const colours = ['red', 'green', 'blue', 'orange', 'yellow'];
export function Button(props) {
const [selectedColourIndex, setColourIndex] = useState(0);
const nextColour = () => {
const newColourIndex = selectedColourIndex 1;
if (colours[newColourIndex])
setColourIndex(newColourIndex);
else
setColourIndex(0);
}
return (<button type="button" style={{backgroundColor: colours[selectedColourIndex]}}
onClick={nextColour}>Change color</button>);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/444595.html