首页 > 其他分享> > react 组件间互相传值

react 组件间互相传值

2022-01-24 19:59:35 作者：互联网

在父组件中定义一个函数，该函数用于处理传递过来得值（比如用于修改父组件中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>

标签：render,在子,value,react,state,props,组件,传值
来源： https://blog.csdn.net/fwk19840301/article/details/122673676