React實現(xiàn)下拉框的key,value的值同時傳送
更新時間：2022年08月03日 15:03:21 作者：SeveCc
這篇文章主要介紹了React實現(xiàn)下拉框的key,value的值同時傳送方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
React下拉框的key,value的值同時傳送
需求
一般下拉框選擇后會傳送一個ID號給后臺，然而今天后臺要讓前端頁面將id和name，一起送過去。
總結(jié)思路
開始沒想到要到Select，里面加一個事件來傳值，想的是選擇后確認(rèn)值然后通過用戶選擇的來將用戶的選的值取出來在送過去，然在就在Option里面加事件，來觸發(fā)現(xiàn)傳過去的值是所有的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'))以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談react路由傳參的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Reactjs?+?Nodejs?+?Mongodb?實現(xiàn)文件上傳功能實例詳解
今天是使用?Reactjs?+?Nodejs?+?Mongodb?實現(xiàn)文件上傳功能，前端我們使用?Reactjs?+?Axios?來搭建前端上傳文件應(yīng)用，后端我們使用?Node.js?+?Express?+?Multer?+?Mongodb?來搭建后端上傳文件處理應(yīng)用，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-06-06
這篇文章主要介紹了React 添加引用路徑時如何使用@符號作為src文件,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
本篇文章主要介紹了React-Native中props具體使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要給大家介紹了關(guān)于React Native中Mobx的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
React Native 真機(jī)斷點調(diào)試+跨域資源加載出錯問題的解決方法
下面小編就為大家分享一篇React Native 真機(jī)斷點調(diào)試+跨域資源加載出錯問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
react.js 獲取真實的DOM節(jié)點實例(必看)
下面小編就為大家?guī)硪黄猺eact.js 獲取真實的DOM節(jié)點實例(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要跟大家介紹了關(guān)于React中事件處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)React具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要介紹了sass在react中的基本使用,主要包括安裝sass和編寫APP.tsx中的基本dom，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了React 全面解析excel文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09