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

Question

我需要在我的页面中列出一个很长的名字列表，而首先显示所有名字是不可取的。所以我尝试在上面添加一个展开更多按钮。但是，使用按钮将使浏览器在按下按钮后将焦点保持在该按钮上，使按钮在屏幕上的位置保持不变，同时在该按钮之前插入名称。另一方面，使用任何不可聚焦的元素（例如具有 onclick 功能的 div）将执行所需的行为但完全失去可访问性。使&ldquo;按钮&rdquo;只能点击但不能聚焦。如何使按钮像片段 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 = [

  'Alex',

  'Bob',

  'Charlie',

  'Dennis',

  'Evan',

  'Floron',

  'Gorgious',

  'Harris',

  'Ivan',

  'Jennis',

  'Kurber',

  'Lowrance',

]

const ExpandList = (props) => {

  const [idx, setIdx] = React.useState(8)

  const handleExpand = e => {

    e.target.blur()

    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 2

单击后暂时卸载按钮并设置超时以将其添加回来似乎可以完成工作。由于浏览器失去了对原始展开按钮的关注，这将在不关注原始按钮的情况下保持内容刷新：

const ExpandList = (props) => {

  const [idx, setIdx] = React.useState(8)

  const [showBtn, setShowBtn] = React.useState(true)

  const handleExpand = e => {

    setShowBtn(false)

    setIdx(idx + 1)

    setTimeout(() => setShowBtn(true), 10)

  }

  return <div className='demo'>

    <h1>Name List</h1>

    {myArray.slice(0,idx).map(

      name => <p key={name}>{name}</p>

    )}

    {showBtn?

      <div>

        <button onClick={handleExpand} children='Button Expand' className='pointer' />

        <div onClick={handleExpand} className='pointer'>Div Expand</div>

      </div> :

      <div></div>

    }

  </div>

}

但我仍在寻找一种不需要“卸载”应该一直存在的东西的方法。