菜单

React-组件之间的通讯

2019年6月14日 - Html/Html5

分析:要让组件2与组件1协同,就让组件1和2都去绑定父组件的事态。也等于说让八个零件受控。数据的走向是,组件1将本人的数据进步到父层,并且保留在父层的处境中。父层中的数据经过组件第22中学的props属性传递到零部件第22中学,并在视图层举办绑定。

1,子组件调用父组件的方法
(1)子组件要拿到父组件的属性,需要通过 this.props 方法。
(2)同样地,如果子组件想要调用父组件的方法,只需父组件把要被调用的方法以属性的方式放在子组件上,子组件内部便可以通过“this.props.被调用的方法”这样的方式来获取父组件传过来的方法。

2,父组件调用子组件的方法
在 ReactJS 中有个叫 ref 的属性。这个属性就像给组件起个引用名字一样,子组件被设置为 ref 之后(比如 ref="xxx")。父组件便可以通过 this.refs.xxx 来获取到子组件了。
 //child-1 子组件-1为输入框
  class Input extends React.Component{
   constructor(...args){
   super(...args);
   }
   render(){
    return <input type="text"/>
   }
  }
  //child-2  子组-2为显示框
  class Show extends React.Component{
   constructor(...args){
    super(...args);
   }
   render(){
    return <p></p>
   }

  }

事例2:一时候往往必要对数码做拍卖,再传给父组件,比方过滤或许机关补全等等,上面包车型大巴例子对用户输入的信箱做简单说明,自动过滤非数字、字母和”@.”以外的字符。
效果图

// 父组
 class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   };
  }
  onInp(text){
   this.setState({
    message:text
   })
  }
  render(){
   return(
    <div>
     <Input onInp={this.onInp.bind(this)} content={this.state.message}/>
     <Show onShow={this.state.message}/>
    </div>
   );
  }
 }
 //child-1
 class Input extends React.Component{
  constructor(...args){
  super(...args);
  }
  fn(ev){
   this.props.onInp(ev.target.value);
  }
  render(){
   return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/>
  }
 }
 //child-2
 class Show extends React.Component{
  constructor(...args){
   super(...args);
  }
  render(){
   return <p>{this.props.onShow}</p>
  }

 }
 //最后渲染出
 ReactDOM.render(
  <Parent/>,
  document.getElementById('app')
 );

Snip20171012_1.png

以上正是本文的全部内容,希望对我们的读书抱有支持,也愿意大家多多扶助脚本之家。

//  子类 - Child
import React from 'react';

export default class Child extends React.Component {

  handleVal = () => {
    var val = this.refs.emailDom.value;
    val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
    this.props.handleEmail(val);
  }

  render() {
    return (
      <div>
        请输入邮箱:<input ref="emailDom" onChange={this.handleVal}/>
      </div>
    );
  }
}
// 父类 - Parent
import React from 'react';
import Child from './Child';

export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: 'ddd'
    }
  }

  handleEmail = (value) => {
    this.setState({
      email: value
    });
  }

  render() {
    return (
      <div>
        <div>用户邮箱:{this.state.email}</div>
        <Child name="email" handleEmail={this.handleEmail}/>
      </div>
    );
  }
}

上代码:

//  子类 - Child
import React from 'react';

export default class Child extends React.Component {

  render() {
    return (
      <div>
        请输入邮箱:<input onChange={this.props.handleEmail}/>
      </div>
    );
  }
}

// 父类 - Parent
import React from 'react';
import Child from './Child';

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={this.handleEmail}/>
      </div>
    );
  }
}

将输入层的图景(数据)升高到阿爹组件中.下边是改写后的零件1

图片 1

class Input extends React.Component{
  constructor(...args){
    super(...args);
  }
   //将输入的内容更新到自身组件的状态中,并且将改变后的状态作为参数传递给该组件的一个自定义属性onInp()
  fn(ev){ 
   this.props.onInp(ev.target.value);
  }
  render(){
   //用onInput(注意react中采用驼峰写法和原生的略有不同)绑定fn()函数
   return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/>
  }
 }

图片 2

写完的代码是这般的

图片 3

随着来大家进来到<Show/>组件中,给其情节绑定那几个穿件来的onShow属性。<Show/>组件变为

父类调用子类的函数和属性

见状此间或许会有四个难题:onInp()和content未有啊?不要急,接着看

Snip20171012_2.png

诸如此类组件2展现层的多寡现已绑定好了,接下去我们即使改动老爹层状态中的message的内容就足以使绑定的显得层的剧情跟着一块变化

事例3:如若还存在外孙子组件的图景呢?如下图,黑框为父,绿框为子,红框为孙,供给子孙的数量都传给曾外祖父。原理一样的,只是父要将公公对外甥的管理函数直接传下去。
效果图

回到几天的重大,讲react组件之间的情形传递。

子组件向父组件传值
事例1:这里如下图,用户邮箱为父,海水绿框为子。
父组件为用户输入的邮箱设好state,即“{email:
”}”,同一时间写好管理state的函数,即“handleEmail”,那多个称呼随
意起;再将函数以props的款型传到子组件,子组件只需在事变产生时,调用父组件传过来的函数就能够。

效果图

下一场在父组件中的<Show/>改为

import React from 'react';
class Grandson extends React.Component {
  render() {
    return (
      <div>性别:
        <select onChange={this.props.handleSelect}>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
    );
  }
}

export default class Child extends React.Component {

  render() {
    return (
      <div>
        姓名:<input onChange={this.props.handleVal}/>
        <Grandson handleSelect={this.props.handleSelect}/>
      </div>
    );
  }
}

import React from 'react';
import Child from './Child';

export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      sex: ''
    }
  }

  handleVal = (event) => {
    this.setState({
      username: event.target.value
    });
  }

  handleSelect = (event) => {
    this.setState({
      sex: event.target.value
    });
  }

  render() {

    return (
      <div>
        <div>用户姓名:{this.state.username}</div>
        <div>用户性别:{this.state.sex}</div>
        <Child handleVal={this.handleVal} handleSelect={this.handleSelect}/>
      </div>
    );
  }
}

您恐怕感兴趣的篇章:

image.png

<Show onShow={this.state.message}/>

image.png

class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   };
  }
  //传进的text是其提升上来的状态,然后再更新父组件的状态
  fn(text){
   this.setState({
    message:text
   })
  }
  render(){
   return(
    <div>
      /*
       onInp就出现在这里,并绑定一个函数,
       并且有一个content将父组件的状态同步到子组件中
      */
     <Input onInp={this.fn.bind(this)} content={this.state.message}/> 
     <Show onShow={this.state.message}/>
    </div>
   );
  }
 }

在支付进程中,平时会碰着父组件和子组件之间互相通讯,React子组件和父组件通讯包涵以下多少个方面:

class Parent extends React.Component{
   constructor(...args){
    super(...args);
   }
   render(){
    return(
     <div>
      <Input}/>
      <Show/>
     </div>
    );
   }
  }

图片 4

2.概念父组件Parent并且将多个子组件插入到父组件中

// 子类
import React from 'react';

export default class ButtonComment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }

  sendSword = () => {
    var newCount = this.state.count + 1;
    this.setState({
      count: this.state.count + 1
    });
    this.props.getSwordCount();
  }

  render() {
    return (
      <button onClick={this.sendSword}>{this.props.buttonName}</button>
    );
  }
}
// 父类
import ButtonComment from './ButtonComment';
import React from 'react';

export default class ImDaddyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sendCount: 0
    }
  }


  getSwordCount = () => {
    this.setState({sendCount:this.refs.getSwordButton.state.count + 1});
  }

  sendSword = () => {
    this.refs.getSwordButton.sendSword();
  }

  render() {
    return (
      <div>
        <ButtonComment ref="getSwordButton" getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/>
        <button onClick={this.sendSword}>通过老爸送宝刀</button>
        <p>
          父子俩共送{this.state.sendCount}把宝刀!!!
        </p>
      </div>
    );
  }
}

1.定义多少个子组件child-1和child-2

图片 5

//在父层中的constructor中定义状态为一个空的message,this.state = {message:''}
class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   }

image.png

随即改写父组件中的输入层子组件1,

效果图

首先步先绑定<Show/>组件

前段时间学习浅尝则止的学习了眨眼之间间react.js那个UI的框架,react那些库给本身的最大的感到正是它能够完全的接管UI层,在要改成视图的东西的时候只供给更动其this.state中的状态。只要操作数据层的东西视图层就能够产生变化,这点笔者要么很开心的。能够解脱对DOM的第一手操作,毕竟直接来会比较复杂,本来应该是逻辑层js中混杂着各样css的字符串,对于自个儿来讲多少难过(JSX中也夹杂那标签,但本身觉的不该把它当作标签,看作语句会习于旧贯一点)。

class Show extends React.Component{
  constructor(...args){
   super(...args);
  }
  render(){
   return <p>{this.props.onShow}</p>
  }

今昔的任务是在组件1总输入一些文字,同不经常间在组件第22中学还要显示出来。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图