React js - Как установить размер выпадающего меню?

Question

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

Ex .

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

javascript reactjs material-design

0

parth 22 Окт 2018 в 14:55

Answer 1

Попробуй это

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

1

evgeni fotia 22 Окт 2018 в 13:25

Answer 2

Вы можете использовать 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 без какого-либо плагина

0

Shivam 22 Окт 2018 в 13:15

React js - Как установить размер выпадающего меню?

2 ответа

Похожие вопросы

Новые вопросы

javascript