媒介：react中的数据活动有很好的解决方案：redux，然则redux关于初学者来讲进修曲线比较陡，并且在小型项目不太实用，开辟保护本钱都比较高，所以这里我只说单独用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要求代码。。。。。
}

以上是近来进修所得，若有毛病烦请斧正，不胜感激！