时间戳

首页 > 解决方案 > 如何使用 React js 在下拉列表中显示数组值？

javascript - 如何使用 React js 在下拉列表中显示数组值？

问题描述

我想使用 react js 在下拉列表中显示所有月份。下面是我的代码。我用时刻来获取所有 12 个月。我在控制台中获得了价值，但在我的下拉列表中没有。

要显示下拉值，请使用 . 我也用过。我不知道我哪里错了。任何人都可以帮助我吗？提前致谢。

const fareMon = () => {
      const months = [];
      const monthList = moment.months();
      months.push(<option value={monthList} />);
      console.log('MONTHS123', monthList);
      return months;
};
return (
<div className={styles.formClm2}>
    <Form.Group className={styles.formGroup}>
        <Form.Label>{t('PaymentPage.lblExpiry')}</Form.Label>
        <div className="double">
            <Form.Control required as="select" name="startDate">
                <option value="">Months</option>
                {fareMon()}
            </Form.Control>
        </div>
    </Form.Group>
</div> )

标签： javascriptreactjs

解决方案

您需要遍历月份数组并在表单控件选项元素中设置值。

像这样，简化的东西。

<Form.Control required as="select" name="startDate">
  {months.map(month => (<option key={month.id} value={month.value}>{month.label}</option>))}
</Form.Control>

关键点：

  • 迭代某个描述的数据源。

  • 确保每个选项都有一个key道具

推荐阅读