2017-02-20 61 views
1

我正在使用react-bootstrap和ReactJS。我期待选择选项作为参数,但没有看到填充选项的方式。这是迄今为止的代码。我如何传递数据react-bootstrap添加选项以选择 - ReactJS

render() { 

    return (
     <div> 
      <Button bsStyle="primary" onClick={this.open}>Add Parameter</Button> 
      <Modal show={this.state.showModal} onHide={this.close}> 
       <Modal.Header> 
        <Modal.Title>Add/Edit Parameter</Modal.Title> 
       </Modal.Header> 
       <Modal.Body> 
        <form> 
         <FormGroup controlId="parameterType"> 
          <ControlLabel>Type</ControlLabel> 
          <FormControl componentClass="select" placeholder="Type"> 
           <option value="select">select</option> 
           <option value="other">...</option> 
          </FormControl> 
         </FormGroup> 
        </form> 
       </Modal.Body> 
       <Modal.Footer> 
        <Button bsStyle="primary" onClick={this.close}>Save Changes</Button> 
       </Modal.Footer> 
      </Modal> 
     </div> 
    ) 
} 

回答

1

您会映射您的数据以编程方式生成选项。假设你的选择是在一个阵列中: options=[{value: 'select'}, {value: 'other'}]

<FormControl componentClass="select" placeholder="Type"> 
    { 
    options.map((option, index) => { 
     return (<option key={index} value={option.value}>{option.value}</option>) 
    }) 
    } 
</FormControl>