Question

我是新来的反应者，我通过此链接“ reactjs - Dropdown select with 2 fields”，这里的目标是我必须在“速率范围”字段中获得最小值和最大值。为了获得最小值和最大值，我使用了输入标签代替了标签。

我正在尝试在左侧显示最小值和最大值，但是当我们单击min和Max输入时，这些值显示在左侧，我必须获取速率范围字段中的最小值和最大值。

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;

在上述查询中，您能帮我吗

Answer 1

您忘记添加

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

如何在上面的字段中显示2个输入的值？

1 个答案: