如何使用 React JS 插入下拉列表 [英] How to insert a dropdown using React JS

查看：43
本文介绍了如何使用 React JS 插入下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

import React, { Component } from 'react';从反应路由器"导入{链接}import { Dropdown, DropdownMenu, DropdownItem, Progress } from 'reactstrap';从redux-react-session"导入会话；从 '../BeaconSettings' 导入 BeaconSettings;类 NewBeacon 扩展组件 {构造函数(道具){超级(道具)；this.state = {输入名称:''，输入说明: '' ,输入区: '' ,输入存储: '' ,输入层:''};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);//警报(嘿")；this.toggleStore = this.toggleStore.bind(this);this.toggleFloor = this.toggleFloor.bind(this);this.toggleZone = this.toggleZone.bind(this);this.state = {下拉区域:假};this.state ={下拉商店:假};this.state ={下拉地板:假};this.state = {数据:[{name:"Nikko Laus1"},{名称:山姆柯林斯"}，{名称:卡尔·史密斯·韦森"}],店铺:[{名称:"abcd"},{名称:山姆柯林斯"}，{名称:卡尔·史密斯·韦森"}],地面:[{name:"Ist"},{名称:IInd"}，{名称:IIIrd"}]};}静态上下文类型 = {路由器:React.PropTypes.object.isRequired}处理提交(事件){警报('提交:' + this.state.inputname + this.state.inputdescription + this.state.inputzone + this.state.inputstore + this.state.inputfloor);event.preventDefault();this.context.router.push('/components/BeaconSettings');}切换区(){this.setState({dropdownZone: !this.state.dropdownZone});}切换存储(){this.setState({dropdownStore: !this.state.dropdownStore});}切换地板(){this.setState({dropdownFloor: !this.state.dropdownFloor});}句柄名称(事件){this.setState({inputname: event.target.value});}句柄描述(事件){this.setState({inputdescription: event.target.value});}处理区(事件){this.setState({inputzone: event.target.value});}处理地板(事件){this.setState({inputfloor: event.target.value});}处理商店(事件){this.setState({inputstore: event.target.value});}使成为() {让 Zone = this.state.data.map(person =>{return });让商店 = this.state.store.map(person =>{return });让楼层 = this.state.floor.map(person =>{return });返回(<div><div><div className="动画淡入淡出"><br/><div className="card" style={{ width: 77 + '%' }}><div className="card-header">创建信标

<div className="卡片块"><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 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 className="card-header">选择一个区域

<div className="card-block"><div className="px-1 row">区域:<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="选择一个区域"onClick={this.toggleZone} data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownZone}/><下拉菜单><DropdownItem>{Zone}<divider/></DropdownItem></下拉菜单></Dropdown></div></div></div><div className="card-header">选择商店

<div className="card-block"><div className="px-1 row">存储:<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="选择商店"onClick={this.toggleStore} data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownStore}/><下拉菜单><DropdownItem>{Store}<divider/></DropdownItem></下拉菜单></下拉菜单></div></div></div><div className="card-header">选择楼层

<div className="card-block"><div className="px-1 row">楼层:<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="选择一个楼层"onClick={this.toggleFloor} data-toggled="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownFloor}/><下拉菜单><DropdownItem>{Floor}<divider/></DropdownItem></下拉菜单></Dropdown></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">下一步</div><div className="px-2"><Link to={'/components/social-buttons'} className="nav-link btn btn-block btn-danger" activeClassName="active>取消

<div className="float-right"><Link to={'/components/social-buttons'} className="nav-link btn btn-block btn-success" activeClassName="active">默认通知</链接></div></div></div>)}}类 DropElement 扩展了 React.Component{构造函数(){极好的();}使成为(){return ({this.props.data.name}</DropdownItem>);}}导出默认的 NewBeacon;

这是我的代码，我想使用 React JS 插入一个下拉列表我试过了，但那不是正确的方法，或者这不是应用下拉菜单的方法那么如何处理这个问题，我想要我使用数组完成的动态

解决方案

如何不需要为每个 Dropdowntype 设置单独的句柄函数，而不是将标识符传递给为您完成工作的 onChange 函数.同样在您的构造函数中，您应该在单个 this.state 中定义所有状态变量，而不是创建多个状态变量.我希望这会有所帮助

import React, { Component } from 'react';从反应路由器"导入{链接}import { Dropdown, DropdownMenu, DropdownItem, Progress } from 'reactstrap';从redux-react-session"导入会话；从 '../BeaconSettings' 导入 BeaconSettings;类 NewBeacon 扩展组件 {构造函数(道具){超级(道具)；this.state = {输入名称:''，输入说明: '' ,输入区: '' ,输入存储: '' ,输入层:'',下拉区域:假，下拉商店:假，下拉地板:假，数据:[{name:"Nikko Laus1"},{名称:山姆柯林斯"}，{名称:卡尔·史密斯·韦森"}],店铺:[{名称:"abcd"},{名称:山姆柯林斯"}，{名称:卡尔·史密斯·韦森"}],地面:[{name:"Ist"},{name:"IInd"},{名称: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);//警报(嘿")；}静态上下文类型 = {路由器:React.PropTypes.object.isRequired}处理提交(事件){警报('提交:' + this.state.inputname + this.state.inputdescription + this.state.inputzone + this.state.inputstore + this.state.inputfloor);event.preventDefault();this.context.router.push('/components/BeaconSettings');}切换下拉(dropType){this.setState({[dropType]: !this.state[dropType]})}句柄名称(事件){this.setState({inputname: event.target.value});}句柄描述(事件){this.setState({inputdescription: event.target.value});}handleChange(事件，类型){this.setState({[type]: event.target.value});}使成为() {让 Zone = this.state.data.map(person =>{return });让商店 = this.state.store.map(person =>{return });让楼层 = this.state.floor.map(person =>{return });返回(<div><div><div className="动画淡入淡出"><br/><div className="card" style={{ width: 77 + '%' }}><div className="card-header">创建信标
<div className="卡片块"><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 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 className="card-header">选择一个区域
<div className="card-block"><div className="px-1 row">区域:<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="选择一个区域"onClick={this.toggleDropdown.bind(this, 'dropdownZone'}} data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownZone}/><下拉菜单>{区}</下拉菜单></Dropdown></div></div></div><div className="card-header">选择商店
<div className="card-block"><div className="px-1 row">存储:<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="选择商店"onClick={this.toggleDropdown.bind(this, 'dropdownStore'}} data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownStore}/><下拉菜单>{店铺}</下拉菜单></下拉菜单></div></div></div><div className="card-header">选择楼层
<div className="card-block"><div className="px-1 row">楼层:<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="选择一个楼层"onClick={this.toggleDropdown.bind(this, 'dropdownFloor')} data-toggled="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownFloor}/><下拉菜单>{地面}</下拉菜单></Dropdown></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">下一步</div><div className="px-2"><Link to={'/components/social-buttons'} className="nav-link btn btn-block btn-danger" activeClassName="active>取消
<div className="float-right"><Link to={'/components/social-buttons'} className="nav-link btn btn-block btn-success" activeClassName="active">默认通知</链接></div></div></div>)}}类 DropElement 扩展了 React.Component{构造函数(){极好的();}使成为(){return ({this.props.data.name}</DropdownItem>);}}导出默认的 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"},
                {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;

Here is my code and i wanted to insert a dropdown using React JS I tried and did that but that's not the right way or that's not the way to apply dropdown so how to deal with that and i want that dynamic which i done using the arrays

解决方案

How don't need a individual handle function for each Dropdowntype, rather than that pass an identifier to a onChange function which does the job for you. Also tin your constructor you should be defining all the state variables in a single this.state ad not create multiple state variables. I hope this helps

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;

这篇关于如何使用 React JS 插入下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆