-
在父组件中定义一个函数,该函数用于处理传递过来得值(比如用于修改父组件中state得数据)
-
在子组件调用部分通过属性绑定得形式绑定该函数(在子组件中就可以通过this.props.属性名就可以拿到该函数)
-
在子组件中绑定触发传值得事件比如点击事件,在事件处理函数中通过this.props.属性名()调用父组件中定义得方法
-
就可以在父组件中拿到传递过来得值进行使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子组件向父组件传值</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
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: 'haha'
}
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>