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傳值
步驟:
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'))
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- React 函數式組件和類式組件詳情
- 一起來學習React元素的創建和渲染
- 詳解vue 表單綁定與組件
- 淺析React 對state的理解
- React組件實例三大屬性state props refs使用詳解