在 reactjs 中单击时，如何将按钮从一个 div 移动到另一个？

Question

我在 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中做这件事并不是什么好事。 有任何想法吗？

Answer 1

设置一个可以包含数字的 state，并将数据 ID 添加到 div。 然后在您的点击处理程序中，您可以选择按钮编号和 div id，然后重置 state。

 const { useState } = React; function Example() { const [ data, setData ] = useState({ divOne: [1, 2, 3, 4, 5], divTwo: [] }); function handleClick(e) { const { num } = e.target.dataset; const { parentNode } = e.target; 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>