如何使用 'react-select' 生成 0 到 100 之间的数字？

Question

我正在使用 React，如何创建一个显示 0 到 100% 数字的下拉菜单？

我的下拉菜单：

import React, { useState } from 'react'
import Select from 'react-select';
import Tag from './Tag'

export default function Dropdown({ className, options, styleSelect, defaultValue}) {
    const [selected, setSelected] = useState(defaultValue);     

    return (
        <>
            {selected ?
                <Tag selected={selected} setSelected={setSelected} styleSelect={styleSelect} />
                :
                <Select className={className} value={selected} onChange={setSelected} options={options}/>
            }
        </>
    )
}

如果不是那么久我会做:

const PERCENTAGE = [
        { label: '0', value: '0' },
        ...
    ]

然后<CustomDropdown options={PERCENTAGE}/>

或者我正在考虑使用 jquery 但它不起作用

Answer 1

您可以通过映射 101 个元素的数组来实现 PERCENTAGE 数组，例如 -

const PERCENTAGES = [...new Array(101)]
  .map((each, index) => ({ label: index, value: index });

但是，这将是糟糕的用户体验。如果您还没有探索过，您或许可以尝试 <input type="range">。

编辑 -

如果你需要生成一个间隔为 20 的，那么你可以创建一个 6 的数组并通过乘以 20 的系数来映射它们 -

const PERCENTAGES = [...new Array(6)]
   .map((each, index) => {
      const value = index * 20;
      return ({
        label: value,
        value,
      })
   });

如何使用 'react-select' 生成 0 到 100 之间的数字？

How can I generate number from 0 to 100 using 'react-select'?

reactjs

dropdown