Question

我尝试构建一个Select下拉列表并使用for循环填充输入字段。

import React, { Component } from 'react';

export default class Test extends Component {
  render() {
    let options = [];
    for (let i=2; i < 20.5; i += 0.5){
      options.push(<option value={i*60} key={i}>{i} hours</option>)
    }
    return (
      <select>
        {options}
      </select>
    )
  }
}

{i} hours部分会导致Uncaught TypeError: Cannot read property 'props' of undefined错误消息。将其更改为固定字符串可防止出错。

我确定我遗漏了一些基本的东西，但我不知道为什么这不起作用。

Answer 1

试试这个：

import React, { Component } from 'react';

export default class Test extends Component {
  render() {
    const options = [];
    for (let i=2; i < 20.5; i += 0.5) { options.push(i); }
    return (
      <select>
        {options.map(option => (
          <option key={option} value={option*60}>
            {option} hours
          </option>
        ))}
      </select>
    )
  }
}

使用for循环实现构建选择输入

1 个答案: