React.js之组件通信(基础)_js 1、点击 “发送” 按钮获取输入域的内容 hello world 2、把输入域-优快云博客

本文详细介绍了React中三种常见的组件间通信方式：子组件向父组件通信、父组件向子组件通信以及无嵌套关系的组件间通信，并通过具体实例进行说明。

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

我平时工作中用的最多的应该算是各个元素之间通信，比如点击一个按钮，另一个按钮打开或者灰掉，全选，动态显示表格等等。在React里面就是组件之间的通信。

（为什么说是基础呢？很简单，redux还没弄懂~用来解决多层嵌套的组件之间避免一层层来通信）

主要是分为三类：

1.子组件向父组件通信

下面这个例子的效果是，在文本框中输入邮箱，会在一个div中同时显示出来；

这个文本框就是子组件，div就是父组件；

这里还记得props么？ --------组件里面定义的属性，我们可以通过this.props.xxx来使用这个属性或者方法；

首先在父组件中定义一个处理函数来处理状态的变化，然后子组件也同时引用这个函数，子组件在使用的时候父组件可以通过这个函数获取相应的值，并用来自己使用；

概况起来说：react中state改变了，组件才会update。父写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子，子调用父的函数，同时引起state变化。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>react-hello-world</title>
	<script src="react.js"></script>
	<script src="react-dom.js"></script>
	<script src="babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/babel'>
class Child extends React.Component{
	constructor(props){
		super(props);
	}
    render(){
        return (
            <div>
                请输入邮箱：<input onChange={this.props.handleEmail}/>
            </div>
        )
    }
}


//父组件，此处通过event.target.value获取子组件的值
class Parent extends React.Component{
	constructor(props){
		super(props);
		this.state={
			email: ''
		}
	}
    handleEmail(event){
        this.setState({
		email: event.target.value
		});
    }
    render(){
        return (
            <div>
                <div>用户邮箱：{this.state.email}</div>
                <Child name="email" handleEmail={(e)=>{this.handleEmail(e)}}/>
            </div>
        )
    }
}
ReactDOM.render(
  <Parent />,
  document.getElementById('app')
);

</script>
</body>
</html>

2.父组件向子组件通信

下面这个例子的效果就是勾选一个chekbox后，下面div中会提示是true or false；

checkbox就是父组件，div是子组件；

其实也是利用了props这个属性来实现的，这次是把checkbox的属性定义在子组件的属性中，然后子组件通过this.props.xxx来获取。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>react-hello-world</title>
	<script src="react.js"></script>
	<script src="react-dom.js"></script>
	<script src="babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/babel'>
class Child extends React.Component{
	constructor(props){
		super(props);
	}
    render(){
        return (
           <div>
               是否选中：<span>{this.props.isSelect?"true":"false"}</span>
            </div>
        )
    }
}


class Parent extends React.Component{
	constructor(props){
		super(props);
		this.state={
			isSelect:true
		}
	}
    handleChange(){
        this.setState(prevState => {return {
		  isSelect: !prevState.isSelect
		}});
    }
    render(){
        return (
          <div>
            <input type="checkbox" checked={this.state.isSelect} onChange={()=>this.handleChange()}/>
            <Child isSelect={this.state.isSelect}/>
          </div>
        )
    }
}


ReactDOM.render(
  <Parent />,
  document.getElementById('app')
);

</script>
</body>
</html>

3没有任何嵌套关系的组件之间传值（PS：比如：兄弟组件之间传值）

下面这个例子就是用一个按钮去清除文本框的内容；

文本框和按钮都是父组件中的子组件；

子组件不能直接跟子组件通信，需要用父组件做一个中介，来实现通信；

首先是文本框组件通过this.props.handleChange这个函数来和父组件建立联系，把文本框输入的值通过this.handleChange 的

e.target.value传递给父组件，父组件再通过this.state.text这个属性，传递给文本框组件，使得文本框能够显示输入的内容；然后按

钮组件通过this.props.handleClick这个函数和父组件this.handleClick建立联系，通过这个函数来改变this.state.text的值，从而改

变文本框的内容；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>react-hello-world</title>
	<script src="react.js"></script>
	<script src="react-dom.js"></script>
	<script src="babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/babel'>
class Child extends React.Component{
     constructor(props){
	   super(props);
	}
    render(){
        return (
            <div>
                <input type="text" value={this.props.text} onChange={(e)=>{this.props.handleChange(e)}}/>
            </div>
        )
    }
}


class Child2 extends React.Component{
      constructor(props){
		super(props);
	}
    render(){
        return (
            <div>
                <button onClick={()=>{this.props.handleClick()}}>清除</button>
            </div>
        )
    }
}


class Parent extends React.Component{
     constructor(props){
	   super(props);
	   this.state={
		text:"",
	   }
	}
    handleClick(){
        this.setState({
		text:""
	   });
    }
	
	handleChange(e){
	     this.setState({
		text:e.target.value
	    })
	}
	
    render(){
        return (
            <div>
                <Child  text={this.state.text} handleChange={(e)=>{this.handleChange(e)}}/>
				<br/>
                <Child2 handleClick={()=>{this.handleClick()}}/>
            </div>
        )
    }
}


ReactDOM.render(
  <Parent />,
  document.getElementById('app')
);
</script>
</body>
</html>

说实话，上面这些功能如果用jq的话其实就几句话是事情-。- 可能是目前还没涉及到复杂的组件，所以看不出react的优点