我在做這個簡單的電子商務網站，在產品頁面上，您可以選擇不同的屬性，例如尺寸、顏色 - 由可點擊的 div 表示，資料從 GraphQl 獲取，然后通過 map 函式生成到 DOM。
return (
<div className="attribute-container">
<div className="attribute">{attribute.id.toUpperCase()}:</div>
<div className="attribute-buttons">
{attribute.items.map((item) => {
if (type === "Color") {
return (
<AttributeButton
key={item.id}
className="color-button"
style={{ backgroundColor: item.value }}
onClick={() => addAtribute({type: type, value: item.value })}/>
);
}
return (
<AttributeButton
key={item.id}
className="size-button"
size={item.value}
onClick={() => addAtribute({ type: type, value: item.value })}
/>
);
})}
</div>
</div>
);
我匯入外部組件，然后檢查屬性的型別是否為顏色（型別顏色具有不同的樣式），然后根據該型別進行渲染。
我想要實作的是，當我單擊一個屬性按鈕時，它的樣式會發生變化，但是當我單擊另一個屬性按鈕時，當然會為我要購買的商品選擇不同的尺寸或顏色，新按鈕的樣式會發生變化以及之前選擇的按鈕回到它的默認樣式。執行按鈕樣式更改onclick的第一步很簡單，但是在選擇不同的屬性時，我無法將頭纏繞在它們之間，因此當時只能單擊一個按鈕。
這是 AttributeButton 的代碼：
class Button extends PureComponent {
constructor(props){
super(props);
this.state = {
selected: false,
}
}
render() {
return (
<div
className={ !this.state.selected ? this.props.className : "size-selected " this.props.className}
style={this.props.style}
onClick={() => {this.props.onClick(); this.setState({selected: !this.state.selected}) }}
>
{this.props.size}
</div>
);
}
}
export default Button;
PS - 我必須為此使用類組件，這不是我的選擇。
uj5u.com熱心網友回復：
您需要在組件selected之外擁有狀態<Button>并將其用作道具。就像是：
handleSelect = (button) => {
const isSelected = this.state.selected === button;
this.setState({ selected: isSelected ? false : button });
};
render() {
return (
<>
<Button
isSelected={this.state.selected === "ColorButton"}
onClick={() => this.handleSelect("ColorButton")}
/>
<Button
isSelected={this.state.selected === "SizeButton"}
onClick={() => this.handleSelect("SizeButton")}
/>
</>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/515387.html
下一篇：如何一次更改多個正方形顏色？