React父子组件传值

在React的思想中，一切皆组件！

我们经常将一些常用的，或者将一个复杂的页面拆分成不同组件，原本定义在同一个页面或者说同一个scope中的属性，方法就会产生跨组件的使用方式，这样就不利于我们传参。

但，React提供了处理组件之间传递的属性值或者参数的方法。

1. 父子组件之间的值传递
2. 兄弟组件之间的值传递

对于父子组件传参，有两种情况

1. 父组件向子组件传参(使用props属性传值即可)
2. 子组件向父组件传参(使用callback函数处理)

对于第一种情况，父组件向子组件传参，直接在调用子组件中传递参数即可。然后在子组件中使用this.props.xxxx既能获取父组件的一些属性值，前提是必须在子组件中实现父组件的super(props)，这种方式比较简单，这里就不放代码了。

我们主要看看第二种情况，怎么回传子组件的参数。

现在有这么个需求：

我将另外一个组件(组件中包含一个穿梭框)引入到当前组件中的Modal中，那么子组件的一些数据需要在做完处理后，传给父组件，在点击Modal的ok按钮时，下发到server端。

按钮的点击事件肯定是定义在父组件中的，

看一下父组件中Modal定义：

<Modal
                    title="Add Attribute"
                    style={{ top: 100, width: "800px", margin: "0 auto" }}
                    visible={this.state.fetchModalVisible}
                    onOk={() => this.saveFetchModalVisible(false)}
                    onCancel={() => this.cancelFetchModalVisible(false)}
                >
                    <FetchLdapAttibute getLdapAttribute={this.getLdapAttribute} />
                </Modal>

这里的getLdapAttribute就是要往子组件传递的回调函数，在子组件中进行触发，

//父组件函数。用于父子组件传值
    getLdapAttribute = (targetKeys) => {
        console.log("这里是父组件")
        console.log(targetKeys)
        console.log("--------")
    }

这里使用钩子函数来进行this指向。

子组件中定义的穿梭框：

render() {
        return (
            <Transfer
                dataSource={this.state.mockData}
                listStyle={{
                    width: 350,
                    height: 300,
                }}
                targetKeys={this.state.targetKeys}
                onChange={this.handleChange}
                render={this.renderItem}
            />
        );
    }

当handleChange触发时，将调用父组件的函数：

handleChange = (targetKeys, direction, moveKeys) => {
        this.setState({ targetKeys:targetKeys });
        this.props.getLdapAttribute(targetKeys)
    };

这样就可以将子组件的数据传递给父组件，看一下效果：