我需要在我的頁面中列出一個很長的名字列表，而首先顯示所有名字是不可取的。所以我嘗試在上面添加一個展開更多按鈕。但是，使用按鈕將使瀏覽器在按下按鈕后將焦點保持在該按鈕上，使按鈕在屏幕上的位置保持不變，同時在該按鈕之前插入名稱。另一方面，使用任何不可聚焦的元素（例如具有 onclick 功能的 div）將執(zhí)行所需的行為但完全失去可訪問性。使“按鈕”只能點擊但不能聚焦。如何使按鈕像片段 div 塊一樣刷新到列表底部？或者是否有更好的選擇來擴展現(xiàn)有列表？const myArray = [? 'Alex',? 'Bob',? 'Charlie',? 'Dennis',? 'Evan',? 'Floron',? 'Gorgious',? 'Harris',? 'Ivan',? 'Jennis',? 'Kurber',? 'Lowrance',]const ExpandList = (props) => {? const [idx, setIdx] = React.useState(8)? const handleExpand = e => {? ? setIdx(idx + 1)? }? return <div className='demo'>? ? <h1>Name List</h1>? ? {myArray.slice(0,idx).map(? ? ? name => <p key={name}>{name}</p>? ? )}? ? <div>? ? ? <button onClick={handleExpand} children='Button Expand' className='pointer' />? ? ? <div onClick={handleExpand} className='pointer'>Div Expand</div>? ? </div>? </div>}ReactDOM.render(<ExpandList/>, document.getElementById('root')).demo>p {? display: block;? padding: 20px;? color: #666;? background: #3331;}.demo>div>div {? display: flex;? padding: 15px;? margin-left: auto;? color: #666;? background: #3331;}.pointer {? cursor: pointer;}.pointer:hover {? background-color: #6663;}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script><div id='root' class='demo'>hello</div>
在 React 中插入內(nèi)容后，防止將焦點放在“展開更多”按鈕上
喵喵時光機
2023-05-25 18:01:13
