Question

我从API获取数据，然后在选择框中将其显示为选项。从第一个选择框中选择的选项将填充第二个选择框的选项。然后我们将提交表格，将我们重定向到另一页。整个功能正常。选择框中的滚动在键盘按键上正常工作，按住滚动条。我坚持认为每当我滚动选项时页面都会滚动而不是选项下拉列表，我不想使用Jquery，因为它不建议与ReactJs一起使用。除了Jquery之外，他们的任何选项都可以执行此操作吗？

import React from 'react';
import { Route, Redirect } from 'react-router'
import { Async } from 'react-select';
import Select from 'react-select'
import { renameKeys } from '../utils'

export class ExplorePage extends React.Component {
  constructor() {
    super()
    this.state = {
      cityValue: null,
      universityValue: 0,
      unselectedUnivValue: [],
      os: "",
      classes: "",
      class2: ""
    }
    this.universitySelectChange = this.universitySelectChange.bind(this);
    this.citySelectChange = this.citySelectChange.bind(this);
    this.getCities = this.getCities.bind(this)
    this.getUniv = this.getUniv.bind(this)
    this.osCheck = this.osCheck.bind(this);
  }

  osCheck() {
    this.state.os = navigator.platform;
    console.log(this.state.os);
    if (this.state.os == 'Win32') {
      this.state.classes = document.getElementsByClassName('Select-placeholder');
      for (var i = 0; i < this.state.classes.length; i++) {
        this.state.classes[i].classList.add('for-Win32');
      }
      this.state.class2 = document.getElementsByClassName('Select-value');
      for (var i = 0; i < this.state.class2.length; i++) {
        this.state.class2[i].classList.add('for-Win32');
      }
    }
  }

  componentDidMount() {
    this.osCheck();
  }

  componentWillUnmount() {
    this.osCheck();
  }

  universitySelectChange = (universityValue) => {
    this.setState({ universityValue });
  }
  citySelectChange = (cityValue) => {
    this.setState({ cityValue });
    this.getUniv(cityValue).then((options) => { this.setState({ unselectedUnivValue: options }) })
  }
  getCities() {
    return fetch(`API`)
      .then((response) => response.json())
      .then((json) => {
        let newKey = { city_id: 'value', name: 'label' }
        return {
          options: json.response.result.map((item) => renameKeys(item, newKey))
        }
      })
  }

  getUniv(cityValue) {
    return fetch(`API`)
      .then((response) => response.json())
      .then((json) => {
        let newKey = { university_id: 'value', name: 'label' }
        let toReturn = json.response.result.map((item) => renameKeys(item, newKey))
        return toReturn
      })
  }

  render() {
    return <section id="scroll-section6" className="explore-res img-bg height-70 d-flex align-items-center">
      <div className="container">
        <div className="row">
          <div className="col-lg-12 mt-5 pt-5">
            <div className="st-sec-content">
              <h1 className="st-sec-heading">EXPLORE RESIDENCES</h1>
              <form>
                <ul className="res-prop-select-group">
                  <li>
                    <div className="city-icon"></div>
                    <Async
                      onChange={() => { this.osCheck(), this.citySelectChange }}
                      loadOptions={this.getCities}
                      placeholder="Select your City"
                      removeSelected={this.state.removeSelected}
                      simpleValue
                      value={this.state.cityValue}>
                    </Async>
                  </li>
                  <li>
                    <div className="country-icon"></div>
                    <Select multi
                      onChange={() => { this.osCheck(), this.universitySelectChange }}
                      options={this.state.unselectedUnivValue}
                      placeholder="Select your College"
                      removeSelected={this.state.removeSelected}
                      simpleValue
                      value={this.state.universityValue}>
                    </Select>
                  </li>
                  <li>
                    <button className="st-l-hm-btn-1 a-link go mr-0">
                      <a class="text-white font-weight-light"
                        href={this.state.cityValue === null ? '/residence' : `/residence/${this.state.cityValue}/${this.state.universityValue}`}
                        onClick={(e) => {
                        }}>Go</a></button>
                  </li>
                </ul>
              </form>
            </div>
          </div>
        </div>
      </div >
    </section >
  }
}

Answer 1

您是否尝试过使用focus() method

您可以在focus ref上使用上述select方法或者您也可以在autofocus上设置select道具

<Select multi onChange={()=> 
{this.osCheck(), this.universitySelectChange }}
autoFocus={true}
options={this.state.unselectedUnivValue}
placeholder="Select your College"
removeSelected={this.state.removeSelected}
simpleValue
value={this.state.universityValue}>
  </Select>

滚动选择框不在页面上

1 个答案: