我已經將以下按鈕放在一個 div 中
const [state, setstate] = useState([]);
getButtonsUsingMap(){
const arr = [1,2,3,4,5];
return arr.map((num) => {
return (
<button
key={num}
className="buttons"
onClick={(e) => {
state.push(num);
}}
>
{num}
</button>
);
});
}
目前我的兩個 div 看起來像這樣：
function App(){
return (
<>
<div className="left" style={{ float: "left" }}>
{getButtonsUsingMap()}
</div>
<div className="right" style={{ float: "right" }}></div>
</>
);
}
單擊這些按鈕時，我希望它們移動到另一個 div。當按鈕在另一個 div 上被點擊時，按鈕必須回到原來的 div。我找到了一個解決方案，但它涉及到 document.getElementById()。但我認為在 reactjs 中這樣做并不是一件好事。有任何想法嗎？
uj5u.com熱心網友回復：
設定一個可以包含數字的狀態，并將資料 id 添加到 div。然后在您的點擊處理程式中，您可以選擇按鈕編號和 div id，然后重置狀態。
const { useState } = React;
function Example() {
const [ data, setData ] = useState({
divOne: [1, 2 , 3, 4, 5],
divTwo: []
});
function handleClick(e) {
const { parentNode, nodeName } = e.target;
if (nodeName === 'BUTTON') {
const { num } = e.target.dataset;
const { id } = parentNode.dataset;
const remaining = data[id].filter(el => el !== num);
if (id === 'divOne') {
setData({
divOne: remaining,
divTwo: [...data.divTwo, num].sort()
});
}
if (id === 'divTwo') {
setData({
divOne: [...data.divOne, num].sort(),
divTwo: remaining
});
}
}
}
return (
<div onClick={handleClick}>
<div data-id="divOne" className="red">
{data.divOne.map(el => {
return (
<button data-num={el}>
Click {el}
</button>
)
})}
</div>
<div data-id="divTwo" className="blue">
{data.divTwo.map(el => {
return (
<button data-num={el}>
Click {el}
</button>
)
})}
</div>
</div>
);
};
const arr = [1, 2, 3, 4, 5];
ReactDOM.render(
<Example arr={arr} />,
document.getElementById('react')
);div { padding: 1em; }
.blue { background-color: blue; }
.red { background-color: red; }<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/393484.html
標籤：javascript 反应