1. 程式人生 > >react子元件如何向父元件傳值

react子元件如何向父元件傳值

var Grandson = React.createClass({ render: function(){ return ( <div style={{border: "1px solid red",margin: "10px"}}>{this.props.name}: <select onChange={this.props.handleSelect}> <option value="">男</option> <option value="
">女</option> </select> </div> ) } }); var Child = React.createClass({ render: function(){ return ( <div style={{border: "1px solid green",margin: "10px"}}> {this.props.name}:<input onChange={this
.props.handleVal}/> <Grandson name="性別" handleSelect={this.props.handleSelect}/> </div> ) } }); var Parent = React.createClass({ getInitialState: function(){ return { username: '', sex: '' } }, handleVal: function(
event){ this.setState({username: event.target.value}); }, handleSelect: function(event) { this.setState({sex: event.target.value}); }, render: function(){ return ( <div style={{border: "1px solid #000",padding: "10px"}}> <div>使用者姓名:{this.state.username}</div> <div>使用者性別:{this.state.sex}</div> <Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/> </div> ) } }); React.render( <Parent />, document.getElementById('test') );

相關推薦

JS——視窗視窗(radio選中的列

父視窗 <input type="text" class="font3" name="doctor_code" id="doctor_code"> <input type="text" class="font3" name="doctor_desc" id="doctor_d

關於jquery和頁面頁面

剛接觸jquery 遇到問題了。 想用jquery實現這樣一個功能:例如當father頁面的一個文字框(txtEmployee)輸入控制元件獲得焦點的時候。 彈出一個子頁面child.aspx: child頁面中放的是一個repeater控制元件繫結的Employee表中的資料, 雙擊repeater控制元

react 元件元件簡單示例

父元件 data即為要向子元件 ExpressionTree 元件傳遞的值, 子元件 node.props.title,就相當於this.props.title,onSelect api 的理解請參考 ant design 元件的 樹選擇元件

React筆記(二):元件元件

通過回撥函式 在父元件中定義好state和處理state的回撥函式,在子元件中通過this.props獲取函式的名稱,然後在子元件中向函式傳入改變的state 父元件: class BrowserPerformance extends Compon

元件元件(事件發生在元件中)和事件

專案中一個功能 可能在很多地方都有出現 那麼此時我們肯定是要抽成一個元件, 如果此功能中需要傳值呢 我覺得子元件向父元件傳值, 父元件呼叫子元件裡面的事件, 父元件向子元件傳值云云…. 前兩者真的是需要仔細點琢磨 專案有個需求: 需要對編號:中的值進行純數字驗證並且進行搜尋,

元件元件 --呼叫的無參方法【必看】

我上次寫過一篇關於父元件向子元件傳值 參考地址為:https://blog.csdn.net/weixin_43814195/article/details/84892753 所以今天我在寫一篇關於子元件向父元件傳值的文章 首先 ,子元件是無法直接改變父元件的資料的,只能通過父元件改

元件元件--呼叫元件的有參方法【必看】

咳咳,我來啦,今天我來補充一下,說一下Vue的子元件向父元件傳值 的 呼叫父元件的有參方法 想要父元件呼叫無參的方法 參考地址為:https://blog.csdn.net/weixin_43814195/article/details/84899700 話不多說,上程式碼!!啦

元件元件元件元件

父元件向子元件傳值成功總結如下:    子元件在props中建立一個屬性,用以接收父元件傳過來的值    父元件中註冊子元件    在子元件標籤中新增子元件props中建立的屬性    把需要傳給子元件的值賦值給該屬性1.在子元件中建立一個按鈕,給按鈕繫結一個點選事件2.在響

vue-元件元件

子元件註冊觸發事件,父元件註冊 觸發子元件事件後的方法寫在method裡面 父元件這麼寫 <component-a v-on:child-say="listenToMyBoy"><

vue元件元件----$emit

子元件向父元件傳值可以使用  $emit()   我的理解是子元件通過$emit方法把自己的第一個引數eventName傳遞給父級,父級把eventName當成一個事件,觸發這個事件接收子級傳給自己的資料或執行操作 $emit ( eventName,args..) 引

元件元件元件元件

子->父 例如:子向父傳遞flag 在子元件中想要傳出的的dom元素中新增事件 @click=”sendFlag”; 在vue的methods定義方法 sendFlag(){ let flag=this.flag; this.

vue學習(四):元件元件

子元件向父元件傳參主要依靠 v-on 和  $.emit 這個是vue官網上給的方法呼叫,我們看看頁面上怎麼使用。 子元件 main_Header.vue <template> <div> <div>{{count}}</

React 的資料流動(反向由元件元件傳遞資料)

在React中,資料都大體上都是單向資料流動的,由父節點傳到子節點,子元件都是通過Props從父元件那裡獲取資料,這樣的話,如果很多子元件用了資料只需要改變父元件的資料子元件的資料都會發生改變reac

react元件元件傳遞資料例項

這個例子很簡單,看一下就懂: class Son extends React.Component { render() { return <input onChange={thi

Vue.js元件元件通訊

一、場景描述: 曾經有個電商專案,其中有個“老帶新”模組,而且該模組新增的入口很多,但是新增後展示效果還不一樣,當時就考慮將新增的元件單獨拿出來,其實就是一個子元件向父組同步資料的過程。 當然,背景不重要了,關鍵是看實現的方式。 二、場景展示效果 (PS:展示效果請忽略美感)

Vue筆記——元件元件傳遞資料

Vue專案中經常使用到元件之間的數值傳遞,實現的方法很多,但是原理基本上大同小異。 子元件向父元件出傳遞資料,使用自定義事件的方式。 父元件向子元件傳遞資料,使用props屬性的方式。 一、在子元件中自定義事件 我們可以從子元件中想父元件中傳遞多個數據,在子

vue 元件元件傳遞資訊

1.要引入vue,js <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">

Vue2 框架整理:元件元件傳遞資料,$emit() 或 v-on

當子元件向父元件傳遞資料的時候,需要的是自定義事件: $on & $emit 子元件用$emit()觸發事件, 父元件用$on() 監聽子元件的事件 或者父元件也可以直接在子元件的自定義標籤上使用v-on來監聽子元件觸發的自定義事件: $e

元件元件通訊的兩種方式

方法一:$emit 子元件 methods:{ onClickMe:function (){ this.$emit('functionName',Data) } //functionName為父元件裡要繫結的方法,data為向父元件傳遞的資料