如何在React-语义UI-Dropdown组件中使用数字数组生成Dropdown?

时间:2019-04-26 10:57:55

标签: reactjs semantic-ui-react

我正在尝试使用React语义UI生成下拉列表-使用数字数组的下拉列表。 以下是我的代码:

 render() {
    const myrange = [100, 200,300,500,1000,2000,3000,5000,7500,10000,15000, 20000, 25000];

    return (
      <React.Fragment>
        <List horizontal relaxed>
          <List.Item>
            <Checkbox
              style={{ paddingLeft: "1em", paddingBottom: "1em" }}
              label={this.props.title}
              checked={this.props.checked}
              onChange={this.props.handleChange}
            />
            <List.Content>
              <Dropdown
                      placeholder="Select"
                      fluid
                      search
                      selection
                      options={myrange.map(merange => ({ label: { merange },

                    }))}
                      // onChange={this.props.handleChange("category")}
                    />

该下拉菜单类似于屏幕截图: enter image description here

此代码有效并生成空白列表,很高兴获得下拉列表中显示的数字...

任何帮助在这里都将受到高度赞赏。

1 个答案:

答案 0 :(得分:1)

 return (
    <React.Fragment>
    <List horizontal relaxed>
    <List.Item>
      <Checkbox
        style={{ paddingLeft: "1em", paddingBottom: "1em" }}
        label="LABEL"
        checked='checked'
        // onChange={this.props.handleChange}
     ></Checkbox>
      <List.Content>
        <Dropdown
                placeholder="Select"
                fluid
                search
                selection
                options={myrange.map(merange => ({key: merange, text:merange, value: merange }))}
              />      
            </List.Content>
          </List.Item>
       </List>
      </React.Fragment>
  )

喜欢。