React.js之组件通信

前端之家收集整理的这篇文章主要介绍了React.js之组件通信前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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


主要是分为三类:

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的优点

猜你在找的React相关文章