javascript reactJS动态下拉列表填充了map函数

ac1kyiln 于 2023-03-16 发布在 Java

关注(0)|答案(6)|浏览(154)

我试图用1到100的数字来呈现一个简单的下拉列表。我创建了一个对象，将数组作为它的唯一元素。我用一个值填充每个数组元素，然后我试图Map该对象以生成下拉列表项。这是我正在执行的代码：

renderPercent = () => {
    let obj = {
        array: []
    };
    for (var l=0;l<100;l++){
        obj.array[l] = l+1;
    }
    console.log("obj: ", obj);
    let optionItems = obj.array.map((item) =>
        <option key={item}>{item}</option>
    );
    return (
        <div>                
            <div className="row">
                <div className="col-9 text-left">
                    <label>Select the percent to transfer</label>
                </div>
                <div className="col-2 text-left">
                    <select>
                        {optionItems}
                    </select>
                </div>
                <div className="col-1 text-left">
                    <label>&nbsp;</label>
                </div>
            </div>
        </div>
    )
}

我按照建议修改了optionItemsMap函数，这是现在呈现这个屏幕时生成的内容：

正如你所看到的，Map功能现在填充了我的下拉菜单。然而，下拉菜单在设备的底部。这只是在Chrome中使用开发者工具查看时的一个bug吗？我注意到的另一件事是，下拉菜单中的数字字体比页面的重置字体大。在我点击下拉箭头之前，数值1显示在下拉菜单中，这是正确的大小，但是当我扩展下拉菜单时，数字看起来要大得多。2为什么会这样呢？
再次感谢stackoverflow社区！

JavaScript

来源：https://stackoverflow.com/questions/52786347/reactjs-dynamic-drop-down-populated-with-map-function

6条答案

按热度按时间

laawzig21#

obj是一个对象，它没有map函数，而obj.array是一个列表，它有map函数。
下面的代码

let optionItems = obj.map((item) =>
        <option key={item.array}>{item.array}</option>
    );

应该是

let optionItems = obj.array.map((item) =>
        <option key={item}>{item}</option>
    );

赞(0）回复(0）举报 2023-03-16

carvr3hs2#

您正尝试Map到对象而不是数组，请将代码修改为：

obj.map((item) =>

应该是

obj["array"].map((item) =>

您可以在console.log中看到这一点。它显示为**{array：[**....

赞(0）回复(0）举报 2023-03-16

jgwigjjp3#

你能做到的。

{Array.from(Array(100), (e, i) => {
    return <option value={i+1}>{i+1}</option>
   }
 )}

“i”将包含0到100之间的值，这就是为什么我将其设置为“i+1”

赞(0）回复(0）举报 2023-03-16

bvn4nwqk4#

您正在对象上而不是数组上执行.map。请尝试使用. notation

let optionItems = obj.array.map((item) =>
   <option key={item.array}>{item.array}</option>
);

完全码

renderPercent = () => {
    let obj = {
        array: []
    };
    for (var l=0;l<100;l++){
        obj.array[l] = l+1;
    }
    return (
        <div>
            <select>
                {obj.array.length > 0 && obj.array.map((item) =>
                    <option key={item.array}>{item.array}</option>
                 )}
            </select>
        </div>
    )
}

赞(0）回复(0）举报 2023-03-16

4si2a6ki5#

试试这样的：

var percentArray = [];

for (var l=0;l<100;l++){
    percentArray.push(l);
}

let optionItems= percentArray.map(x => `<option key=${x}>${x}</option>`);

...

    return (
        <div>
            <select>
                {optionItems}
            </select>
        </div>
    )

赞(0）回复(0）举报 2023-03-16

wgxvkvu96#

我使用下面的代码通过“selectArry”实现下拉功能。

const selectArry = [
{
   Key: "es",
   Value: "Espresso",
},
{
   Key: "ri",
   Value: "Ristretto",
},
{
   Key: "lb",
   Value: "Long Black",
},{
   Key: "mm",
   Value: "Mezzo Mezzo",
},{
   Key: "c",
   Value: "Cappuccino",
}]

<select name="coffee" defaultValue="">
  {props.selectArry && props.selectArry?.data.map((cItem) =>
      <option key={cItem.Value}>{cItem.Value}</option>
   )}
</select>

赞(0）回复(0）举报 2023-03-16

我来回答

javascript reactJS动态下拉列表填充了map函数

6条答案

相关问题

热门标签

最新问答