使用 Props React 填充下拉列表 Select

Question

所以我正在尝试使用 props 使用来自另一个 table 的一些信息填充下拉列表。目前有这个。我不得不向后做循环，因为早些时候它坏了，

import React, { Component, PropTypes } from 'react';
import {
  Button,
  ControlLabel,
  FormGroup,
  Form,
  FormControl
} from 'react-bootstrap';

class UserForm extends Component {

  constructor(props) {
    super(props);
  }

  createPosItems() {
    const posItems = [];
    console.log('heyyyy', this.props);
    for (let i = this.props.position.length; i > this.props.position.length; i--) {
      posItems.push(<option key={i} value={this.props.position.i}>{this.props.position.position_name}</option>);
    }
    return posItems;
  }

  createTeamItems() {
    const teamItems = [];
    console.log('whyyyyy', this.props);
    for (let i = this.props.team.length; i > this.props.team.length; i--) {
      teamItems.push(<option key={i} value={this.props.team.i}>{this.props.team.team_name}</option>);
    }
    return teamItems;
  }

  render() {
    return (
      <div className="row">
        <div className="col-lg-12">
          <Form>
            <FormGroup controlId="employeeFirstName">
              <ControlLabel>First Name</ControlLabel>
              <FormControl
                type="text"
                name="firstName"
                required=""
                value={this.props.user.firstName}
                onChange={this.props.onChange}
              />
            </FormGroup>
            <FormGroup controlId="empEmail">
              <ControlLabel>Email</ControlLabel>
              <FormControl
                type="email"
                name="email"
                required=""
                value={this.props.user.email}
                onChange={this.props.onChange}
              />
            </FormGroup>
            <FormGroup controlId="position">
              <ControlLabel>Job Position</ControlLabel>
              <FormControl
                componentClass="select"
              >
                <option value="">Select a Position</option>
                {this.createPosItems()}
              </FormControl>
            </FormGroup>
            <FormGroup controlId="Team">
              <ControlLabel>Team</ControlLabel>
              <FormControl
                componentClass="select"
              >
                <option value="">Select a Team</option>
                {this.createTeamItems()}
              </FormControl>
            </FormGroup>
            <FormGroup>
              <Button
                pullRight
                type="submit"
                className="btn btn-success"
                disabled={this.props.saving}
                onClick={this.props.onSave}
              >Save</Button>

              <Button
                pullRight
                type="submit"
                className="btn btn-danger pull-right"
                // onClick={this.props.onDelete}
              >Delete</Button>
            </FormGroup>
          </Form>
        </div>
      </div>
    );
  }
}

UserForm.propTypes = {
  user: React.PropTypes.object.isRequired,
  team: React.PropTypes.array.isRequired,
  position: React.PropTypes.array.isRequired,
  onSave: React.PropTypes.func.isRequired,
  onChange: React.PropTypes.func.isRequired,
  saving: React.PropTypes.bool
};

export default UserForm;

表单是另一个页面的子页面。每个其他字段都有效，期待下拉列表，元素显示，但不填充下拉列表。已经尝试使用多人的示例，但仍然无法达到运行。提前致谢！

Answer 1

据我所知，您的 for 循环导致了问题。假设 this.props.team.length 等于 10。然后你的循环看起来像这样：

for (let i = 10; i > 10; i--) { ... }

永远不会执行此 for 循环中的这段代码，因为条件错误。基本上它说，从 i = 10 开始，当 i 大于 10 时执行代码，然后从 i.

中减去 1

但问题是 10 不大于 10，因此循环永远不会执行。如果我使用 i 变量表示，i 永远不会大于 i.

这是应该工作的更新循环：

for (let i = this.props.team.length - 1; i >= 0; i--) { ... }

使用此循环，您可以呈现从末尾（this.props.team 数组的最后一个索引）到索引 0 的选项。

如果你想从头开始，你会写这个for循环：

for (let i = 0; i < this.props.team.length; i++) { ... }

我还建议您使用 Array.prototype.map 并只编写一个函数来填充选项，无需重复。使用这种方法，不需要存储 <option>s 的数组。你可以这样写函数：

populateOptions(options) {
  return options.map((option, index) => (
    <option key={index} value={option}>{option}</option>
  ));
}

然后您将以这种方式调用此函数：

this.populateOptions(this.props.team)

或

this.populateOptions(this.props.position)

Here 是 Array.prototype.map 函数的文档。

Answer 2

你只需像这样从 props 创建一个变量：

const {organizations} = this.props;

然后使用它在 render() 方法中填充下拉列表，如下所示：

<DropdownButton title="Organization" className="m-b m-t" id="dropdown-organization">
                    {organizations.map((organization, i) =>
    <MenuItem key={i}>{organization.name}</MenuItem>)}
</DropdownButton>

onClick 处理程序可以通过道具以同样的方式传递下去。

使用 Props React 填充下拉列表 Select

Populate Dropdown Select with Props React

reactjs

react-bootstrap

redux