日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

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

作者：SeveCc ? 更新時(shí)間： 2022-09-29 編程語言

React下拉框的key,value的值同時(shí)傳送

需求

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

總結(jié)思路

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

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同時(shí)傳送給后臺了

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

原文鏈接：https://blog.csdn.net/sinat_37812785/article/details/101692862

欄目分類
最近更新