0

我想使用 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> )
4

3 回答 3

1

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

像这样，简化的东西。

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

关键点：

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

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

于 2020-03-20T08:12:02.757 回答
1

moment.months()返回一个包含月份名称的数组，您不需要创建新数组。

您必须映射 内的数组Select以显示选项。

例子：

const fareMon = () => {
    const monthList = moment.months();
    return monthList;
};
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().map( month => (<option key={month} value={month}>{month}</option>))}
                </Form.Control>
            </div>
        </Form.Group>
    </div>
)
于 2020-03-20T08:13:43.703 回答
1 
const fareMon = () => {
  const monthList = moment.months();
  const months = monthList.map(item => (
    <option key={item} value={item}>{item}</option> 
  ));
  console.log('MONTHS123', monthList);
  return months;
};

您需要monthsList每个月迭代和映射到<option>.

于 2020-03-20T08:16:08.993 回答