Блог

Главная - Вопросы по программированию - Как я могу получить что-то вроде списка данных в react со следующей структурой кода

Как я могу получить что-то вроде списка данных в react со следующей структурой кода

#javascript #html #css #reactjs

Вопрос:

У меня есть это требование в react, здесь .строки прокручиваются (имеют некоторую фиксированную высоту). Каждая строка .содержит поле ввода и компонент списка для отображения в качестве автоматического предложения (datalist). В фокусе мне нужно показать предложения, ниже ввода и при выборе опции мне нужно сбросить предложения, чтобы они отображали соответствующие предложения.

Проблема здесь в том, что список скрывается внутри прокручиваемого компонента. Пожалуйста, помогите мне показать этот список предложений, даже если я прокручиваю его. Я пробовал использовать datalist, но в react прослушиватели событий не запускаются при нажатии на элементы datalist.

 const App = () => {
  const [show, setShow] = React.useState(false);
  const showSuggestions = () => {
    setShow(!show);
  }
  return(
    <div className='outerMost'>
      <div>Some component</div>
      <div>One more component</div>
      <div className='rows'>
        <div className='row'>
          <input value='' />
          <div className='suggestions'>

          </div>
        </div>
        <div className='row'>
          <input value='' />
          <div className='suggestions'>

          </div>
        </div>
        <div className='row'>
          <input value='' />
          <div className='suggestions'>

          </div>
        </div>
        <div className='row'>
          <input value='' onClick={showSuggestions} />
          {show amp;amp;<div className='suggestions'>
            <ul>
              <li>option 1</li>
              <li>option 2</li>
              <li>option 3</li>
              <li>option 4</li>
              <li>option 5</li>
              <li>option 6</li>
              <li>option 7</li>
              <li>option 8</li>
              <li>option 9</li>
              <li>option 10</li>
            </ul>
          </div>
          }
        </div>
      </div>
      <div><button>click me</button></div>
    </div>
  )
}

ReactDOM.render(
    <App />,
  document.getElementById('root')
); 
 .outerMost {
  margin: auto;
  width: 200px;
}

.rows {
  height: 150px;
  overflow-y: scroll;
}

.row {
  position: relative;
}

.suggestions {
  position: absolute;
  background: beige;
  left: 0;
  width: 166px;
  z-index: 1;
} 
 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id='root'></div>

Ответ №1:

Несмотря на то, что ваши предложения расположены абсолютно, они отображаются внутри строки, потому что позиция строки установлена на relative . Если вы удалите это из строки, ваши предложения будут расположены за пределами строки.

Комментарии:

1. Спасибо вам, Дэвид Клинг, за быстрый ответ. Это работает.

2. когда строки не прокручиваются. Как только строки станут прокручиваемыми, абсолютная позиция будет отображаться в скрытой области переполнения не относительно входного элемента

Метки: