React實現(xiàn)下拉框的key,value的值同時傳送

更新時間：2022年08月03日 15:03:21 作者：SeveCc

這篇文章主要介紹了React實現(xiàn)下拉框的key,value的值同時傳送方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

React下拉框的key,value的值同時傳送

需求

一般下拉框選擇后會傳送一個ID號給后臺，然而今天后臺要讓前端頁面將id和name，一起送過去。

總結思路

開始沒想到要到Select，里面加一個事件來傳值，想的是選擇后確認值然后通過用戶選擇的來將用戶的選的值取出來在送過去，然在就在Option里面加事件，來觸發(fā)現(xiàn)傳過去的值是所有的name，然后就不能打到實際效果，后面找到api看到這個

onSelect

<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'))

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

淺談react路由傳參的幾種方式
這篇文章主要介紹了淺談react路由傳參的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-03-03
Reactjs?+?Nodejs?+?Mongodb?實現(xiàn)文件上傳功能實例詳解
今天是使用?Reactjs?+?Nodejs?+?Mongodb?實現(xiàn)文件上傳功能，前端我們使用?Reactjs?+?Axios?來搭建前端上傳文件應用，后端我們使用?Node.js?+?Express?+?Multer?+?Mongodb?來搭建后端上傳文件處理應用，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧
2022-06-06
React 添加引用路徑時如何使用@符號作為src文件
這篇文章主要介紹了React 添加引用路徑時如何使用@符號作為src文件,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-06-06
React-Native中props具體使用詳解
本篇文章主要介紹了React-Native中props具體使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
React Native中Mobx的使用方法詳解
這篇文章主要給大家介紹了關于React Native中Mobx的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-12-12
React Native 真機斷點調試+跨域資源加載出錯問題的解決方法
下面小編就為大家分享一篇React Native 真機斷點調試+跨域資源加載出錯問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
react.js 獲取真實的DOM節(jié)點實例(必看)
下面小編就為大家?guī)硪黄猺eact.js 獲取真實的DOM節(jié)點實例(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
React學習筆記之事件處理（二）
這篇文章主要跟大家介紹了關于React中事件處理的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習React具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。
2017-07-07
sass在react中的基本使用(實例詳解)
這篇文章主要介紹了sass在react中的基本使用,主要包括安裝sass和編寫APP.tsx中的基本dom，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-09-09
React 全面解析excel文件
這篇文章主要介紹了React 全面解析excel文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09