是否可以在语义 Form.Select 中创建无限滚动

Question

我正在做一个使用 form.select 的项目，我希望能够在列表底部提取更多数据。有没有办法做到这一点？如果是这样，你能给我指出正确的方向吗？

我已经尝试过使用语义的 Visibility 行为，但运气不佳。

<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>

可见性仅跟踪页面上的 Form.Select，而不是下拉选择器。

Answer 1

如果你有一个状态数组，并且你不断地动态添加数据，它会自动呈现。在下面查看我的演示。我制作了 1 秒的 setInterval，让您想象每秒都有数据。我的状态数组 names 会自动更新。因此，无需使用 更多选项 按钮或在 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'));

Demo

是否可以在语义 Form.Select 中创建无限滚动

Is it possible to create a infinite scroll inside of a Semantic Form.Select

infinite-scroll

reactjs

semantic-ui