react-父子组件传值-子传父

最新推荐文章于 2024-07-31 16:51:58 发布

原创最新推荐文章于 2024-07-31 16:51:58 发布 · 480 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#React-父子组件传值-子传父

React 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了在React中如何实现子组件向父组件传递数据的过程。通过一个具体的示例，展示了如何在子组件中触发父组件的状态更新，实现数据的逆向流动。子组件通过调用父组件传递的回调函数，将自身状态或数据作为参数传回，完成子到父的数据传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React-父子组件传值-子传父

1.直接上代码：

			class Children extends React.Component {
				constructor(props){
					super(props);
					this.state={
						msg:'我是子组件',
						pmsg:this.props.pmsg
					}
				}
				send(){
					this.props.handle(this.state.msg);   //利用父组件传进来的回调函数改变父组件内的state值，从而实现子到父组件的数据传递
				}
				render(){
					return (
						<div className='children'>
							<h1>{this.state.msg}</h1>
							<p>{this.state.pmsg}</p>
							<button onClick={(e)=>{this.send(e)}}>点击发送数据到父组件</button>
						</div>
					)
				}
			}
			
			class Parent extends React.Component {
				constructor(props){
					super(props);
					this.state={
						msg:'我是父组件的数据',
						cmsg:''
					}
				}
				changeMsg(data){
					this.setState({
						cmsg:data
					})
					console.log(data);
				}
				render(){
					return (
						<div className='parent'>
							<h1>{this.state.msg}</h1>
							<p>{this.state.cmsg}</p>
							<Children handle={(data)=>{this.changeMsg(data)}} pmsg={this.state.msg} />
						</div>
					)
				}
			}
			ReactDOM.render(
				<Parent />,
				document.getElementById('app')
			)

将父组件内的方法，通过子组件的自定义属性的方式传入，如上：handle={(data)={this.changeMsg(data)}}

在子组件中，通过在方法内使用this.props.handle(data);将子组件内的数据作为参数传入该回调函数，从而实现子传父的实现。