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

2022-08-03 15:03:22 作者：SeveCc

这篇文章主要介绍了React实现下拉框的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传值
<Demo obj={obj} arr={arr} name="hello" str="hi"/>
2、通过{this.props.name}接收 
<!DOCTYPE html>
<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>
	<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(
				<h1>属性</h1>
				<p>{this.props.name}</p>
				<p>{this.props.arr[2]}</p>
				<p>{this.props.obj.name}</p>
				<p>{obj.name}</p>
ReactDOM.render(<Demo obj={obj} arr={arr} name="hello" str="hi"/>,document.getElementById('out'))
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 
您可能感兴趣的文章:
vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)
Vue开发实例探究key的作用详解
vue中key使用的问题示例解析
React 中的列表渲染要加 key的原因分析
详解React中key的作用
vue和react项目中key的作用示例详解
react中Hooks的理解和用法小结
2023-05-05
Suspense对React的意义及作用解析
2023-06-06
一文带你深入理解React中的Context
2023-05-05
探讨JWT身份校验与React-router无缝集成
2023-06-06
React解析html 标签的方法
2023-06-06
使用React实现一个简单的待办任务列表
2023-06-06
详解React如何实现代码分割Code Splitting
2023-06-06
react18 hooks自定义移动端Popup弹窗组件RcPop
2023-06-06
美国设下计谋,用娘炮文化重塑日本,已影响至中国
2021-11-19
时空伴随者是什么意思?时空伴随者介绍
2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终
2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表
2021-10-26
电脑版 - 返回首页
2006-2023 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号