<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
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> - 在父组件中定义一个函数，该函数用于处理传递过来得值（比如用于修改父组件中state得数据）
- 在子组件调用部分通过属性绑定得形式绑定该函数（在子组件中就可以通过this.props.属性名就可以拿到该函数）
- 在子组件中绑定触发传值得事件比如点击事件，在事件处理函数中通过this.props.属性名（）调用父组件中定义得方法
- 就可以在父组件中拿到传递过来得值进行使用
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/201155.html原文链接：https://javaforall.net
