<FormItem label="所屬部門">
	 {getFieldDecorator('departmentName', {
	     initialValue: '',
	     validateTrigger: 'onBlur',
	   })(
	     <Select onSelect={this.hadleDepartment}>
	       <Option value="">請(qǐng)選擇</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同時(shí)傳送給后臺(tái)了

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

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

您可能感興趣的文章:

相關(guān)文章

React的三大屬性你都知道嗎
這篇文章主要為大家詳細(xì)介紹了React的三大屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
react組件的創(chuàng)建與更新實(shí)現(xiàn)流程詳解
React組件分為函數(shù)組件與class組件；函數(shù)組件是無狀態(tài)組件，class稱為類組件；函數(shù)組件只有props，沒有自己的私有數(shù)據(jù)和生命周期函數(shù)；class組件有自己私有數(shù)據(jù)(this.state)和生命周期函數(shù)
2022-10-10
React模仿網(wǎng)易云音樂實(shí)現(xiàn)一個(gè)音樂項(xiàng)目詳解流程
這篇文章主要介紹了React模仿網(wǎng)易云音樂實(shí)現(xiàn)一個(gè)音樂項(xiàng)目的詳細(xì)流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
基于React.js實(shí)現(xiàn)簡(jiǎn)單的文字跑馬燈效果
剛好手上有一個(gè)要實(shí)現(xiàn)文字跑馬燈的react項(xiàng)目，然后ant-design上面沒有這個(gè)組件，于是只能自己手?jǐn)]一個(gè)，文中的實(shí)現(xiàn)方法講解詳細(xì)，希望對(duì)大家有所幫助
2023-01-01
詳細(xì)分析React 表單與事件
這篇文章主要介紹了React 表單與事件的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
深入理解React中何時(shí)使用箭頭函數(shù)
對(duì)于剛學(xué)前端的大家來說,對(duì)于React中的事件監(jiān)聽寫法有所疑問很正常，特別是React中箭頭函數(shù)使用這塊，下面這篇文章主要給大家深入的講解了關(guān)于React中何時(shí)使用箭頭函數(shù)的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-08-08
ReactRouter的實(shí)現(xiàn)方法
這篇文章主要介紹了ReactRouter的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-01-01
理解react中受控組件和非受控組件及應(yīng)用場(chǎng)景
當(dāng)涉及到React框架時(shí),了解受控組件和非受控組件是非常重要的概念,本文主要介紹了理解react中受控組件和非受控組件及應(yīng)用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
React項(xiàng)目中使用Redux的?react-redux
這篇文章主要介紹了React項(xiàng)目中使用Redux的?react-redux，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-09-09
react實(shí)現(xiàn)原生下拉刷新
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)原生下拉刷新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03