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的优点 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |