Как отобразить значения 2 входов в поле выше? - PullRequest
Новая
       35

Как отобразить значения 2 входов в поле выше?

0 голосов
/ 02 ноября 2019

Я новичок, чтобы реагировать, и я прошел по этой ссылке "actjs - выпадающий список с 2 полями ". Здесь моя цель - получить минимальное и максимальное значения в скорости. поле диапазона. Вместо тега я использовал входной тег, чтобы получить минимальное и максимальное значения.

Я пытаюсь показать минимальное значение слева и максимальное значение справа, но когда мынажмите на минимальное и максимальное значения, затем значения отображаются в левой части, и мне нужно получить минимальное и максимальное значение в поле диапазона тарифов. 

import "./sample.css"
import React from "react";
import {List, Input, Form} from "semantic-ui-react"

class Select extends React.Component {

    state = {
      activeMenu: 'min',
      open: true,
      min: '',
      max: ''
    };

    toggleMenu = e => {
      this.setState({
        activeMenu: e.target.name
      });
    };

    toggleOpen = () => {
      this.setState( prevState => {
        return { open: !prevState.open }
      });
    };

    getMenuOptions = () => {
      let options = [];
      switch(this.state.activeMenu){
        case 'min': {
          options = ['$40,000','$60,000','$80,000','$100,000','$120,000','$140,000', '$160,000', '$180,000'];
          break;
        }
        case 'max': {
          options = ['$60,000','$80,000','$100,000','$120,000','140,000','$160,000','$180,000'];
          break;
        }
      }
      return options.map( (option, i) => {
        return (
          <List key={i} onClick={this.handleSelect.bind(this, this.state.activeMenu, option)}>
            {option}
          </List>
        )
      });
    };

    handleSelect = (menu, value) => {
      this.setState({
        [menu]: value
      });
    };

    render() {
      const { open, min, max, activeMenu } = this.state;
      const menuOptions = this.getMenuOptions();
      return(
        <div className="myRange">
          <Input icon='caret down' onClick={this.toggleOpen} placeholder='Rate Range'/>

          {open && (
            <div>
             <Form>
              <Form.Group className="myRange" >
                        <Form.Input placeholder='Min' name="min" value={min} onFocus={this.toggleMenu} />
                        &mdash;
                        <Form.Input className = "myValues"placeholder='Max' name="max" value={max} onFocus={this.toggleMenu}/>

                    </Form.Group>
                    </Form>
              <div>
                <ul className={activeMenu}>
                  {menuOptions}
                </ul>
              </div>
            </div>
          )}
        </div>
      )
    }
  }export default Select;

Не могли бы вы помочь мне ввышеуказанный запрос

1 Ответ

0 голосов
/ 02 ноября 2019

Вы забыли добавить 

ul.max {
  float: right;
}

в файл sample.css. Вот почему максимальное значение не отображается справа.

Ссылка на рабочий пример, который я сделал - https://codesandbox.io/s/semantic-ui-example-mupej

РЕДАКТИРОВАТЬ: Вы хотите что-то вроде этого? https://codesandbox.io/s/semantic-ui-example-9rzow

РЕДАКТИРОВАТЬ: Это то, что вы хотите? https://codesandbox.io/s/semantic-ui-example-e25on

...