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組件的創(chuàng)建與更新實現(xiàn)流程詳解
React組件分為函數(shù)組件與class組件;函數(shù)組件是無狀態(tài)組件,class稱為類組件;函數(shù)組件只有props,沒有自己的私有數(shù)據(jù)和生命周期函數(shù);class組件有自己私有數(shù)據(jù)(this.state)和生命周期函數(shù)2022-10-10React模仿網(wǎng)易云音樂實現(xiàn)一個音樂項目詳解流程
這篇文章主要介紹了React模仿網(wǎng)易云音樂實現(xiàn)一個音樂項目的詳細(xì)流程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08