- 在父组件中定义一个函数，该函数用于处理传递过来得值（比如用于修改父组件中state得数据）
- 在子组件调用部分通过属性绑定得形式绑定该函数（在子组件中就可以通过this.props.属性名就可以拿到该函数）
- 在子组件中绑定触发传值得事件比如点击事件，在事件处理函数中通过this.props.属性名（）调用父组件中定义得方法
- 就可以在父组件中拿到传递过来得值进行使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义用来显示一个人员信息的组件</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="root"></div>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */
// 创建类式组件
class Father extends React.Component {
handleGetMsg = (value) => {
console.log(value)
this.setState({
test: value
})
}
state = {
}
render() {
return (
<div>
<p>从子组件中接收到得数据: {this.state.test}</p>
<Child getMsg={this.handleGetMsg}/>
</div>
)
}
}
class Child extends React.Component {
state = {
val: '子组件state'
}
handleClick = () => {
this.props.getMsg(this.state.val)
}
render() {
return (
<div>
<button onClick={this.handleClick}>子组件</button>
</div>
)
}
}
ReactDOM.render(<Father />, document.getElementById('root'))
</script>
</body>
</html>