Можно ли создать бесконечный свиток внутри семантической формы. Выберите

Question

Я работаю над проектом, в котором используется form.select , и я хочу иметь возможность получать больше данных, находясь в нижней части списка.Есть ли способ сделать это?Если бы вы могли указать мне правильное направление.

Я уже попробовал поведение Visibility с Semantic и нашел немного удачи.

<Visibility offset={[10, 10]} onUpdate={this.handleUpdate}>
  <Form.Select
    label="Example"
    required={true}
    placeholder="Test Placeholder"
    noResultsMessage="No results found for the selected product"
    fluid={true}
    search={true}
    selection={true}
    clearable={true}
    value={value || ""}
    options={this.state.valueList}
    onChange={this.onChange.bind(value, "value")}
  />
</Visibility>

Visibility простоотслеживает Form.Select на странице, а не раскрывающийся селектор.

Answer 1

Если у вас есть массив состояний, и вы продолжаете добавлять данные динамически, он будет отображаться автоматически. Проверьте мое демо ниже. Я сделал setInterval из 1 секунды, чтобы вы представляли данные, поступающие каждую секунду. Мой массив состояний names обновится автоматически. Таким образом, нет необходимости иметь какую-то кнопку MORE OPTIONS или прокрутку в вашем Select, потому что информация будет добавлена ​​автоматически.

import React, { Component } from 'react';
import './style.css';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      names: ["Person 1", "Person 2", "Person 3", "Person 4"],
      nb: 4
    };
  }

  render() {

    setTimeout(() => {
       const tmp = [...this.state.names]; 
       const num = this.state.nb; 
       num++; 
       tmp.push("Person " + num) 
       this.setState({ names: tmp, nb: num });
    }, 1000);

    return (
      <div>
        <select>
          {this.state.names.map((value) =>
            <option value={value}>{value}</option>
          )}
         </select>  
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Демо