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

如果有一个状态数组，并且继续动态添加数据，它将自动呈现。在下面查看我的演示。我以setInterval花费了1秒，让您想象每秒都有数据。我的状态数组names将自动更新。因此，无需单击“更多选项” 按钮或在“选择”中保持滚动状态，因为它将自动添加信息。

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

是否可以在语义形式内创建无限滚动。

1 个答案: