大佬教程收集整理的这篇文章主要介绍了如何使用React JS插入下拉菜单，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
怎么不需要每个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;
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"},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插入一个下拉列表，但这不是正确的方法，也不是应用下拉列表的方法，因此如何处理它，我希望使用数组完成动态处理
以上是大佬教程为你收集整理的如何使用React JS插入下拉菜单全部内容，希望文章能够帮你解决如何使用React JS插入下拉菜单所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。