這篇文章主要介紹了關於react父子元件之間的傳值問題解析,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
父元件傳遞給子元件:
核心想法就是將父元件中的state傳遞給子元件
父组件代码: class Father extends React.Component { constructor(props){ super(props); // 父组件的state this.state = { menu:[] } } componentDidMount() { // 这里可以发ajax请求 去后端请求数据 通过setState将值保存到自己的state中 // 假定data为后端请求回来的数据 var data = []; this.setState({ menu: data }) } render() { return ( {this.state.menu.map(function (data) { return <Children data={data} key={data.key}/> })} ) } } export default Father; 子组件代码: class Children extends React.Component { render(){ // 这里的data就是父组件传递过来的值 var data = this.props.data; return( <Col md={ 3 }> <FormGroup className="p-b"> <label className="input"> // 这里就可以通过将data中的值渲染到子组件中 <input id={data.key} type="text" value={data.value}/> <em className="fa fa-check"></em>{data.value} </label> </FormGroup> </Col> ) } }
以上就是父元件傳值給子元件
現在的專案開發過程中,大多數的子元件是需要有一些資料上的操作的,像是input中的輸入、checkbox的選取與取消選取等,這樣的情況下就需要將子元件的資料回傳給父元件,應用redux的話,可以透過store統一管理分發數據,單獨用react也是可以實現的
子組件傳值給父組件:
總體思路就是父組件與子組件統一管理父組件中的state,父組件將state傳遞給子元件,子元件透過onChange將資料回傳給父元件的state
父组件代码: class Father extends React.Component { constructor(props){ super(props); // 父组件的state this.state = { menu:[] } } componentDidMount() { // 这里可以发ajax请求 去后端请求数据 通过setState将值保存到自己的state中 // 假定data为后端请求回来的数据 var data = []; this.setState({ menu: data }) } // 子组件触发 参数就是子组件回传回来的一些数据 ChildrenFunc(data,value,key){ // 拿到当前组件的state let menu = this.state.menu; // 遍历当前state,遍历过程中可以对state中的值进行修改 for(let i = 0; i < menu.length; i++){ if(key == menu[i].key){ menu[i].value = data; } }; // 将修改之后的值保存到当前组件的state中 this.setState({ menu: menu }); } render() { return ( {this.state.menu.map(function (data) { // onUpdata方法就是子组件状态改变时就会调用这个函数,通过这个函数子组件就会触发父组件的ChildrenFunc方法,从而达到修改state的功能 return <Children data={data} key={data.key} onUpdata={(data,value,position) => {$this.ChildrenFunc(data,value,position)}}/> })} ) } } export default Father; 子组件代码: class Children extends React.Component { // 子组件状态改变就会触发父组件传递过来的onUpdata方法,可以进行一系列的传值,比如将输入值传递回去等 ChildrenChange(event,value,position){ this.props.onUpdata(event.target.value,value,position); } render(){ // 这里的data就是父组件传递过来的值 var data = this.props.data; return( <Col md={ 3 }> <FormGroup className="p-b"> <label className="input"> // 这里就可以通过将data中的值渲染到子组件中 <input id={data.key} onChange={(event) => {this.ChildrenChange(event,"end",data.key)}} type="text" value={data.value}/> <em className="fa fa-check"></em>{data.value} </label> </FormGroup> </Col> ) } }
以上就是子元件傳值給父元件的實作方式,父元件中更進一步操作(例如提交資料)就可以透過自身state中的值來進行提交
例如:
父组件中提交数据: addData(){ // 获取state let menu = this.state.menu; // 遍历state 将我们要的数据取出来 var newArray = []; for(let i = 0; i < menu.length; i++){ if(menu[i].key == "某些我们需要的值"){ newArray.push(menu[i].value); } }; // 提交时的参数 var data = { id: "xxxx", menu: newArray.join(",") } // 提交的ajax请求代码。。。。。 }
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
#以上是關於react父子元件之間的傳值問題解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!