如何使用React JS插入下拉菜單

Question

 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: ''}; this.handleName = this.handleName.bind(this); this.handleDescription = this.handleDescription.bind(this); this.handleZone = this.handleZone.bind(this); this.handleStore = this.handleStore.bind(this); this.handleFloor = this.handleFloor.bind(this); this.handleSubmit = this.handleSubmit.bind(this); // alert("hey"); this.toggleStore = this.toggleStore.bind(this); this.toggleFloor = this.toggleFloor.bind(this); this.toggleZone = this.toggleZone.bind(this); this.state = { dropdownZone: false }; this.state ={ dropdownStore: false }; this.state ={ dropdownFloor: false }; this.state = { 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"} ] }; } 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'); } toggleZone() { this.setState({ dropdownZone: !this.state.dropdownZone }); } toggleStore() { this.setState({ dropdownStore: !this.state.dropdownStore }); } toggleFloor() { this.setState({ dropdownFloor: !this.state.dropdownFloor }); } handleName(event) { this.setState({inputname: event.target.value}); } handleDescription(event){ this.setState({inputdescription: event.target.value}); } handleZone(event){ this.setState({inputzone: event.target.value}); } handleFloor(event){ this.setState({inputfloor: event.target.value}); } handleStore(event){ this.setState({inputstore: 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.toggleZone}> <input type="text" value={this.state.inputzone} onChange={this.handleZone} className="caret" placeholder="Select a Zone" onClick={this.toggleZone} data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownZone} /> <DropdownMenu> <DropdownItem>{Zone}<divider /></DropdownItem> </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.toggleStore}> <input type="text" value={this.state.inputstore} onChange={this.handleStore} className="caret" placeholder="Select a Store" onClick={this.toggleStore} data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownStore} /> <DropdownMenu> <DropdownItem>{Store}<divider /></DropdownItem> </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.toggleFloor}> <input type="text" value={this.state.inputfloor} onChange={this.handleFloor} placeholder="Select a Floor" onClick={this.toggleFloor} data-toggled="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownFloor} /> <DropdownMenu> <DropdownItem>{Floor}<divider /></DropdownItem> </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; 

這是我的代碼，我想使用嘗試過的React JS插入下拉菜單，但這不是正確的方法，也不是應用下拉菜單的方法，因此如何處理該問題，我希望使用數組完成動態處理

Answer 1

怎么不需要每個Dropdowntype都有單獨的句柄函數，而不是將標識符傳遞給為您完成工作的onChange函數。 同樣，在構造函數中，您應該在一個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;