Question

因此，我尝试使用props从另一个表中填充下拉列表中的一些信息。目前有这个。我不得不向后循环，因为早些时候它正在破碎，

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执行代码，然后从1中减去i。

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

这是应该有效的更新循环：

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

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

如果你想从头开始，你可以写这个for-loop：

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

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

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

你只需要像这样的道具创建一个变量：

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处理程序可以通过道具以相同的方式传递下来。

填充下拉选择与道具反应

2 个答案: