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

Question

我是 React 新手，我已经完成了这个 link“”这里我的 objective 是我必须获得最小值和最大值速率范围字段。为了获得最小值和最大值，我使用了输入标签而不是标签。

我试图在左侧显示最小值，在右侧显示最大值，但是当我们单击最小值和最大值输入时，值会显示在左侧，我必须获取速率范围字段中的最小值和最大值。

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 = [',000',',000',',000','0,000','0,000','0,000', '0,000', '0,000'];
          break;
        }
        case 'max': {
          options = [',000',',000','0,000','0,000','140,000','0,000','0,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。这就是为什么最大值没有显示在右侧的原因。

Link 我做的一个工作示例 - 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 个输入的值？

How to display values of the 2 inputs in the above field?

reactjs

semantic-ui-react