react Ajax 父子,关于react父子组件之间的传值问题解析

这篇文章主要介绍了关于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

})}

)

}

}

export default Father;

子组件代码：

class Children extends React.Component {

render(){

// 这里的data就是父组件传递过来的值

var data = this.props.data;

return(

// 这里就可以通过将data中的值渲染到子组件中

{data.value}

)

}

}

以上就是父组件传值给子组件

现在的项目开发过程中，大多数的子组件是需要有一些数据上的操作的，比如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 {$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(

// 这里就可以通过将data中的值渲染到子组件中

{this.ChildrenChange(event,"end",data.key)}} type="text" value={data.value}/>

{data.value}

)

}

}

以上就是子组件传值给父组件的实现方式，父组件中更进一步操作(例如提交数据)就可以通过自身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中文网！

相关推荐：