[REACTJS] JS 반응하여 드롭 다운을 삽입하는 방법

JS 반응하여 드롭 다운을 삽입하는 방법

해결법

1. ---

   1.어떻게 당신을 위해 작업을 수행하는 onChange가 함수에 식별자를 통과하지 않고보다, 각 Dropdowntype에 대한 개별 핸들 기능이 필요하지 않습니다. 또한 주석 생성자 여러 상태 변수를 만들 수 없습니다 하나의 this.state 광고의 모든 상태 변수를 정의해야합니다. 이게 도움이 되길 바란다

   어떻게 당신을 위해 작업을 수행하는 onChange가 함수에 식별자를 통과하지 않고보다, 각 Dropdowntype에 대한 개별 핸들 기능이 필요하지 않습니다. 또한 주석 생성자 여러 상태 변수를 만들 수 없습니다 하나의 this.state 광고의 모든 상태 변수를 정의해야합니다. 이게 도움이 되길 바란다

   import React, { Component } from 'react';
   import { Link } from 'react-router'
   import { Dropdown, DropdownMenu, DropdownItem, Progress } from 'reactstrap';
   import Session from 'redux-react-session';
   import BeaconSettings from '../BeaconSettings';
   class NewBeacon extends Component {
     constructor(props) {
       super(props);
       this.state = {inputname: '',
       inputdescription: '' ,
       inputzone: '' ,
       inputstore: '' ,
       inputfloor: '',
       dropdownZone: false,
       dropdownStore: false,
       dropdownFloor: false,
       data:[
                   {name:"Nikko Laus1"},
                   {name:"Sam Collins"},
                   {name:"Carl Smith Wesson"}
               ],
               store:[
                   {name:"abcd"},
                   {name:"Sam Collins"},
                   {name:"Carl Smith Wesson"}   
               ],
               floor:[
                   {name:"Ist"},
                   {name:"IInd"},
                   {name:"IIIrd"}   
               ]
       };
       this.handleName = this.handleName.bind(this);
       this.handleDescription = this.handleDescription.bind(this);
       this.handleSubmit = this.handleSubmit.bind(this);
       this.handleChange = this.handleChange.bind(this);
       this.toggleDropdown = this.toggleDropdown.bind(this);
       // alert("hey");
   
   
     }
   static contextTypes = {
     router: React.PropTypes.object.isRequired
   }
   handleSubmit(event){
   
       alert('Submitted: ' + this.state.inputname + this.state.inputdescription + this.state.inputzone + this.state.inputstore + this.state.inputfloor);
       event.preventDefault();
       this.context.router.push('/components/BeaconSettings');
     }
     toggleDropdown(dropType) {
          this.setState({[dropType]: !this.state[dropType]})
     }
   
   
     handleName(event) {
   
       this.setState({inputname: event.target.value});
     }
     handleDescription(event){
       this.setState({inputdescription: event.target.value});
     }
     handleChange(event, type) {
       this.setState({[type]: event.target.value});  
     }
   
   
   
   
     render() {
       let Zone = this.state.data.map(person =>
           {
               return <DropElement key={person.id} data={person}/>
           });
   
       let Store = this.state.store.map(person =>
       {
           return <DropElement key={person.id} data={person}/>
       });
       let Floor = this.state.floor.map(person =>
       {
           return <DropElement key={person.id} data={person}/>
       });
       return (<div><div>
             <div className="animated fadeIn">
               <br /><div className="card" style={{ width: 77 + '%' }}>
                 <div className="card-header">
                    Create Beacon
                 </div>
                 <div className="card-block">
                   <div className="input-group mb-1">
                     <span className="input-group-addon"><i className="icon-user"></i></span>
                     <input type="text" className="form-control" value={this.state.inputname} onChange={this.handleName} placeholder="Name" />
                   </div>
   
                   <div className="input-group mb-1">
                     <span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
                     <input type="textArea" value={this.state.inputdescription} onChange={this.handleDescription} className="form-control" placeholder="Description"/>
                   </div>
                   <div className="card-header">
                   Select a zone</div>
                   <div className="card-block"><div className="px-1 row">Zone:
                   <div className="px-2 mb-1">
   
                   <Dropdown isOpen={this.state.dropdownZone}  toggle={this.toggleDropdown.bind(this, 'dropdownZone'}>
                       <input type="text" value={this.state.inputzone} onChange={this.handleChange.bind(this, 'inputzone'} className="caret" placeholder="Select a Zone" 
                       onClick={this.toggleDropdown.bind(this, 'dropdownZone'}} data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownZone} />
   
                       <DropdownMenu>
                           {Zone}
   
                       </DropdownMenu>
                     </Dropdown></div></div></div>
   
                     <div className="card-header">
                   Select a Store</div>
                   <div className="card-block"><div className="px-1 row">Store:
                   <div className=" px-2 mb-1">
   
                     <Dropdown isOpen={this.state.dropdownStore}  toggle={this.toggleDropdown.bind(this, 'dropdownStore'}}>
                       <input type="text" value={this.state.inputstore} onChange={this.handleChange.bind(this, 'inputstore')}  className="caret" placeholder="Select a Store" 
                       onClick={this.toggleDropdown.bind(this, 'dropdownStore'}} data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownStore} />
   
                       <DropdownMenu>
   
                        {Store}
   
                       </DropdownMenu>
                     </Dropdown>
   
                   </div></div></div>
                     <div className="card-header">
                   Select a floor</div>
                   <div className="card-block"><div className="px-1 row">Floor:
                   <div className=" px-2 mb-1">
   
                     <Dropdown isOpen={this.state.dropdownFloor}  toggled={this.toggleDropDown.bind(this, 'dropdownFloor')}>
                       <input type="text" value={this.state.inputfloor} onChange={this.handleChange.bind(this, 'inputfloor')}  placeholder="Select a Floor" 
                       onClick={this.toggleDropdown.bind(this, 'dropdownFloor')} data-toggled="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownFloor} />
   
                       <DropdownMenu>
                             {Floor}
   
                       </DropdownMenu>
                     </Dropdown></div></div></div>
   
   
                     </div>
   
                 </div>
   
                 </div>
               </div>
   
             <div className="px-2 row" style={{ width: 90 + '%' }}>
             <div><button  className="nav-link btn btn-block btn-success" onClick={this.handleSubmit} activeClassName="active">
                   Next</button>
                   </div><div className="px-2"><Link to={'/components/social-buttons'} className="nav-link btn btn-block btn-danger" activeClassName="active"> Cancel</Link>
   </div>
   <div className="float-right"><Link to={'/components/social-buttons'} className="nav-link btn btn-block btn-success" activeClassName="active">
   Default Notification
   </Link></div>
   </div></div>
   
   
   
   
       )
     }
   }
   
   class DropElement extends React.Component
   {
       constructor()
       {
           super();
       }
   
       render()
       {
           return (<DropdownItem>{this.props.data.name}
                      </DropdownItem>
               );
       }
   }
   
   export default NewBeacon;
   

from https://stackoverflow.com/questions/42828145/how-to-insert-a-dropdown-using-react-js by cc-by-sa and MIT license