Analysis of value transfer issues between react parent and child components

This article mainly introduces the analysis of value transfer issues between react parent and child components. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

Passing parent components to children Component:
The core idea is to pass the state in the parent component to the child component

父组件代码：
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>
        )
    }
}

The above is the value passed from the parent component to the child component

In the current project development process, most Subcomponents need some data operations, such as input in input, checkbox selection and deselecting, etc. In this case, the data of the subcomponent needs to be passed back to the parent component. If redux is used, it can be done through the store Unified management of distribution data can also be achieved using react alone.

Pass the value of the sub-component to the parent component:
The general idea is that the parent component and the sub-component uniformly manage the state in the parent component, and the parent component passes the state To the child component, the child component passes the data back to the state of the parent component through onChange

父组件代码：
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>
        )
    }
}

The above is how the child component passes the value to the parent component. Further operations in the parent component (such as submitting data) can be done Submit through the value in its own state
For example:

父组件中提交数据：
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请求代码。。。。。
}

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to build a front-end independent development environment with Vue Mock.js

dialog plug-in based on vue.js Release content of art-dialog-vue2.0

The above is the detailed content of Analysis of value transfer issues between react parent and child components. For more information, please follow other related articles on the PHP Chinese website!