反应构建选择输入使用 for 循环

React build select input using for loop

本文关键字：for 循环 输入 构建 选择      更新时间：2023-09-26

我正在尝试构建一个选择下拉列表并使用 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错误消息。将其更改为固定字符串可防止错误。

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

试试这个：

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>
    )
  }
}

或（2021 年）作为功能组件：

export default const Test = () => {
  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>
  )
}
相关文章：