Реагировать JS - Как установить размер отображения выпадающего меню? - PullRequest
0 голосов
/ 22 октября 2018

Я хочу установить размер отображения раскрывающегося списка, чтобы отображались только 5 значений, а затем применить прокрутку в React js.

Пример.

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>

Работает с обычным форматом HTML.Я хочу, чтобы он работал с React JS.Так можно ли этого достичь?

<select onfocus="this.size = 5;" onblur="this.size = 1" onchange="this.size=1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

попробуйте

onFocus={(e)=>{e.target.size = 5}}

, то же самое для остальных убедитесь, что первая буква после on в верхнем регистре.Но я думаю, что было бы лучше, если бы вы создали подобное состояние

this.state = {
   size: 1
}

, а затем изменили тег выбора на

<select size={this.state.size} onFocus={()=>{this.setState({size: 5})}} onBlur={()=>{this.setState({size: 1})}} onChange={(e)=>{e.target.blur()}}>

Вот это Jsfiddle

0 голосов
/ 22 октября 2018

Вы можете использовать react-bootstrap и создавать прокручиваемый раскрывающийся список, применяя fixed высоту для элемента .dropdown-menu и устанавливая overflow-y: scroll;

Например

import React, { Component } from 'react'
import { DropdownButton, MenuItem } from 'react-bootstrap'
import './QuantityInput.css'

export default class ScrollableDrop extends Component {
  render() {
    return (
      <DropdownButton
        bsStyle="default"
        bsSize="small"
        style={{ maxHeight: "28px" }}
        title={"Qty"}
        key={1}
        id="dropdown-size-small"
      >
        <MenuItem eventKey="1">Action</MenuItem>
        <MenuItem eventKey="2">Another action</MenuItem>
        <MenuItem eventKey="3" active>
          Active Item
        </MenuItem>
        <MenuItem eventKey="4">Separated link</MenuItem>
      </DropdownButton>
    )
  }
}

КоличествоInput.css

.dropdown-menu {
  height: 70px;
  overflow-y: scroll;
}

ИЛИ

Возможно, вы захотите реализовать пользовательский раскрывающийся список, который загружается при прокрутке

Реализация бесконечной прокруткиС React Js без какого-либо плагина

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...