Populate Dropdown小道具で選択React

Question

小道具を使用して別のテーブルから情報をドロップダウンに入力しようとしています。現在これを持っています。以前は壊れていたので、私はループを逆にしなければならなかった。

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ループ

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

このコードは、この内部の状態が間違っているので、実行されないでしょう。基本的には、i = 10で始まり、iが10より大きい間は、コードを実行してから、iから1を引きます。

しかし、問題は10が10より大きくないため、ループが実行されないことです。変数iを使ってこれを表現すると、iは決してiより大きくなることはありません。

これは動作するはず更新ループです：あなたが最後（this.props.team配列の最後のインデックス）から0

のインデックスにオプションをレンダリングし、このループを使用して

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

初めからやりたいと思ったら、for-loopと書く：

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

Array.prototype.mapを使用し、オプションを入力するための関数を1つ書くだけで、繰り返しは必要ありません。この方法を使用すると、<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機能です。このようrender()方法でドロップダウンを埋めるために

const {organizations} = this.props; 

と使用それ：：

Answer 2

あなたはちょうどこのような小道具から変数を作成

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

onClickハンドラがダウン渡すことができます同じように小道具を介して。