React实现下拉框的key,value的值同时传送

目录
  • React下拉框的key,value的值同时传送
    • 需求
    • 总结思路
  • React属性传值 key:value形式
    • key:value传值

React下拉框的key,value的值同时传送

需求

一般下拉框选择后会传送一个ID号给后台，然而今天后台要让前端页面将id和name，一起送过去。

总结思路

开始没想到要到Select，里面加一个事件来传值，想的是选择后确认值然后通过用户选择的来将用户的选的值取出来在送过去，然在就在Option里面加事件，来触发现传过去的值是所有的name，然后就不能打到实际效果，后面找到api看到这个

<FormItem label="所属部门">
	 {getFieldDecorator('departmentName', {
	     initialValue: '',
	     validateTrigger: 'onBlur',
	   })(
	     <Select onSelect={this.hadleDepartment}>
	       <Option value="">请选择</Option>
	       {_.map(pageInfList, (op) => {
	         return (
	           <Option value={op ? op.departmentId : ''}>{op ? op.departmentNm : ''}</Option>
	         );
	       })}
	     </Select>
	   )}
 </FormItem>

hadleDepartment = (e, obj) => {
    this.setState({
      departmentId1: e,
      departmentName1: obj.props.children,
    });
  }

这样后就可以将key和value同时传送给后台了

React属性传值 key:value形式

key:value传值

步骤：

1、通过

<Demo obj={obj} arr={arr} name="hello" str="hi"/>

2、通过{this.props.name}接收

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/react.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/browser.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

	<div id="out"></div>

</body>
<script src="js/a2.js" type="text/babel" charset="utf-8"></script>
</html>
var arr=[1,2,'hii']
var obj={
	name:'小明',
	age:22
}

var Demo=React.createClass({
	render(){
		console.log(this.props)
		return(
			<div>
				<h1>属性</h1>
				<p>{this.props.name}</p>
				<p>{this.props.arr[2]}</p>
				<p>{this.props.obj.name}</p>
				<p>{obj.name}</p>
			</div>
		)
	}
})

ReactDOM.render(<Demo obj={obj} arr={arr} name="hello" str="hi"/>,document.getElementById('out'))

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React组件间通信的三种方法（简单易用）

    React组件间通信的三种方法（简单易用）

    目录 一.父子组件通信 二.跨级组件通信 1.逐层传值 2.跨级传值 三.兄弟(无嵌套)组件通信 四.路由传值 五.Redux React知识中一个主要内容便是组件之间的通信,以下列举几种常用的组件通信方式,结合实例,通俗易懂,建议收藏. 一.父子组件通信 原理:父组件通过props(与vue中的props区分开)向子组件通信,子组件通过回调事件与父组件通信. 首先,先创建一个父组件Parent.js跟子组件Children.js,二者的关系为直接父子关系. Parent.js父组件如下,给父组

  • React的组件协同使用实现方式

    React的组件协同使用实现方式

    目录 嵌套 父子组件通信 兄弟组件通信 抽离 Mixin React的LinkedStateMixin Reference: 开发人员不用太过于关注UI层面的实现细节,考虑最多的也就是组件与组件之间的数据通信了.那么,在React开发中,有哪些场景的组件协同?又如何去实现组件的协同使用呢? 组件的协同本质上是对组件的一种组织.管理方式. 目的是使得系统 逻辑清晰.代码模块化.封装细节.代码可复用. 组件的协同分为两种方式:嵌套.抽离.发布订阅模式. 嵌套 组件嵌套的本质就是父子关系,即为父组件和

  • 详解React中key的作用

    详解React中key的作用

    要了解React中key的作用,可以从key的取值入手,key的取值可以分为三种,不定值.索引值.确定且唯一值 在下面的代码中,key的取值是不定值(Math.random()) 问题: 点击按钮的时候,span的颜色会变成红色吗? import React, { useState } from 'react'; function App() { const [initMap, setInitMap] = useState([1,2,3,4]); const handleClick = () =

  • React key值的作用和使用详解

    在react项目中总会遇到这样一个的坑 这是警告数组遍历子元素要有一个唯一的key值,但是key到底是什么,在代码中到底起了什么作用? key概述 react中的key属性,它是一个特殊的属性,它的出现不是给开发者用的(例如你为一个组件设置key之后,也仍无法获取这个组件的key值),而是给react自己用的. 简单来说,react利用key来识别组件,它是一种身份标识标识,就像我们的身份证用来辨识一个人一样.每个key对应一个组件,相同的key react认为是同一个组件,这样后续相同的key

  • 浅谈React Native 传参的几种方式(小结)

    在React Native 中由于业务的需要, 我们往往要在诸多的页面间,组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证,稳定好用的方式给大家 React Navigation 导航传值 推荐指数: ♥ ♥ ♥ ♥ ♥ 适用范围: 相互跳转的页面间传值 兼容性: IOS/Android 原理: React Navigation 为页面的 props 上挂载了 navigation 对象, 可用来做路由跳转,在做页面跳转时可以携带参数/回调方法前往目标页面, 从而达到传参的目的 说明

  • React实现下拉框的key,value的值同时传送

    React实现下拉框的key,value的值同时传送

    目录 React下拉框的key,value的值同时传送 需求 总结思路 React属性传值 key:value形式 key:value传值 React下拉框的key,value的值同时传送 需求 一般下拉框选择后会传送一个ID号给后台,然而今天后台要让前端页面将id和name,一起送过去. 总结思路 开始没想到要到Select,里面加一个事件来传值,想的是选择后确认值然后通过用户选择的来将用户的选的值取出来在送过去,然在就在Option里面加事件,来触发现传过去的值是所有的name,然后就不能打

  • 在Vue 中获取下拉框的文本及选项值操作

    方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo

  • 利用js获取下拉框中所选的值

    利用js获取下拉框中所选的值

    现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </summary> public enum AdministratorRole { [Display(Name = "平台管理员")] PlatformAdministrator = 1, [Display(Name = "加盟商")] JoiningTrader

  • 关于react ant 组件 Select下拉框 值回显的问题

    关于react ant 组件 Select下拉框 值回显的问题

    目录 react ant组件Select下拉框值回显问题 情形 解决得问题 react ant-design Select组件下拉框map不显示 问题描述 问题总结 react ant组件Select下拉框值回显问题 情形 最近在处理react 页面的时候遇到了一个问题:使用ant 的table组件,里面的可编辑单元格类型,但是 我的数据 有一个下拉框在表格中,因为可编辑的table 组件默认单元格是 input输入框,所以下拉框根本就拿不到值,显示不上. 先说一下 下拉框 在表格 column

  • antd多选下拉框一行展示的实现方式

    我们都知道antd的select多选时,如果下拉框宽度不足,则自动浮动到下一行将下拉框撑大,但是这回影响到页面的整体布局. 我们期望的效果是,下拉框只显示一行的值,超出一行的部分自动隐藏. 下面有2种方案来实现这个效果. 1.利用浮动原理 设置下拉框的最大高度为一行的高度,然后超出的部分隐藏. .ant-select-selection--multiple { max-height: 32px; overflow: hidden; } 这种方式存在的弊端是如果有2个选项,一个很短一个很长,那么只

  • jQuery扁平化风格下拉框美化插件FancySelect使用指南

    FancySelect是一款小巧实用的jQuery下拉框美化插件.该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一. 使用方法 HTML结构 FancySelect实用十分简单,它可以和jQuery或Zepto结合使用.在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件.如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它. 默认情况下,FancySelect 在 iOS 设备上仅使用原生

  • Android实现三级联动下拉框 下拉列表spinner的实例代码

    Android实现三级联动下拉框 下拉列表spinner的实例代码

    主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下拉框的选中值改变时,随之修改下级的适配器的绑定值              XML布局: 复制代码 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_w

  • select下拉框插件jquery.editable-select详解

    项目中有个需求,下拉框既可以下拉选择,也可以手动填写 html代码 <span>数据来源</span> <select class="source"> <option value="0">人工导入</option> <option value="1">数据服务平台</option> </select> js代码 $('#noMean').editabl

  • JavaScript实现获取select下拉框中第一个值的方法

    JavaScript实现获取select下拉框中第一个值的方法

    本文实例讲述了JavaScript实现获取select下拉框中第一个值的方法.分享给大家供大家参考,具体如下: 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • select获取下拉框的值 下拉框默认选中方法

    本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值 例如: <select class="form-control" id="numbers"> <option value="1">数字1</option> <option value="2" selected>数字2</option> </select> $("

随机推荐