在 React 中插入内容后，防止将焦点放在“展开更多”按钮上

Question

我需要在我的页面中列出一个很长的名字列表，而首先显示所有名字是不可取的。所以我尝试在上面添加一个展开更多按钮。

但是，使用按钮将使浏览器在按下按钮后将焦点保持在该按钮上，使按钮在屏幕上的位置保持不变，同时在该按钮之前插入名称。

另一方面，使用任何不可聚焦的元素（例如具有 onclick 功能的 div）将执行所需的行为但完全失去可访问性。使“按钮”只能点击但不能聚焦。

如何使按钮像片段 div 块一样刷新到列表底部？或者是否有更好的选择来扩展现有列表？

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>

Answer 1

从点击处理程序中的按钮移除焦点可能是最优雅的方法：e.target.blur()。它适用于任何 HTML 元素，无论它是否可聚焦（与div您的情况一样）。const myArray = [&nbsp; 'Alex',&nbsp; 'Bob',&nbsp; 'Charlie',&nbsp; 'Dennis',&nbsp; 'Evan',&nbsp; 'Floron',&nbsp; 'Gorgious',&nbsp; 'Harris',&nbsp; 'Ivan',&nbsp; 'Jennis',&nbsp; 'Kurber',&nbsp; 'Lowrance',]const ExpandList = (props) => {&nbsp; const [idx, setIdx] = React.useState(8)&nbsp; const handleExpand = e => {&nbsp; &nbsp; e.target.blur()&nbsp; &nbsp; setIdx(idx + 1)&nbsp; }&nbsp; return <div className='demo'>&nbsp; &nbsp; <h1>Name List</h1>&nbsp; &nbsp; {myArray.slice(0,idx).map(&nbsp; &nbsp; &nbsp; name => <p key={name}>{name}</p>&nbsp; &nbsp; )}&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <button onClick={handleExpand} children='Button Expand' className='pointer' />&nbsp; &nbsp; &nbsp; <div onClick={handleExpand} className='pointer'>Div Expand</div>&nbsp; &nbsp; </div>&nbsp; </div>}ReactDOM.render(<ExpandList/>, document.getElementById('root')).demo>p {&nbsp; display: block;&nbsp; padding: 20px;&nbsp; color: #666;&nbsp; background: #3331;}.demo>div>div {&nbsp; display: flex;&nbsp; padding: 15px;&nbsp; margin-left: auto;&nbsp; color: #666;&nbsp; background: #3331;}.pointer {&nbsp; cursor: pointer;}.pointer:hover {&nbsp; 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>

Answer 2

单击后暂时卸载按钮并设置超时以将其添加回来似乎可以完成工作。由于浏览器失去了对原始展开按钮的关注，这将在不关注原始按钮的情况下保持内容刷新：const ExpandList = (props) => {&nbsp; const [idx, setIdx] = React.useState(8)&nbsp; const [showBtn, setShowBtn] = React.useState(true)&nbsp; const handleExpand = e => {&nbsp; &nbsp; setShowBtn(false)&nbsp; &nbsp; setIdx(idx + 1)&nbsp; &nbsp; setTimeout(() => setShowBtn(true), 10)&nbsp; }&nbsp; return <div className='demo'>&nbsp; &nbsp; <h1>Name List</h1>&nbsp; &nbsp; {myArray.slice(0,idx).map(&nbsp; &nbsp; &nbsp; name => <p key={name}>{name}</p>&nbsp; &nbsp; )}&nbsp; &nbsp; {showBtn?&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={handleExpand} children='Button Expand' className='pointer' />&nbsp; &nbsp; &nbsp; &nbsp; <div onClick={handleExpand} className='pointer'>Div Expand</div>&nbsp; &nbsp; &nbsp; </div> :&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; }&nbsp; </div>}但我仍在寻找一种不需要“卸载”应该一直存在的东西的方法。