React中受控组件与数据共享的示例分析

这篇文章主要介绍React中受控组件与数据共享的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

成都创新互联从2013年创立,先为宝塔等服务建站,宝塔等地企业,进行企业商务咨询服务。为宝塔企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

具体如下:

在HTML当中,像,变为开放式标签:

3、select

同理,在React中的

4、利用name处理多个受控组件

如上,我们需要为每个受控组件都设置更新方法onChange,而且每个组件的更新方法都很类似,这样看起来很麻烦,我们可以根据name属性区分不同的组件所对应的state值,利用一个函数来实现多个组件state值的更新:


updateForm(e){
 let name=e.target.name;     //获取组件的name
 let value=e.target.value;    //获取组件的值value
 this.setState({
  [name]:value         //为不同name的组件设置value
 })
}

在setState方法中,通过ES6的语法计算属性[],在中括号中指定要更新的属性名的表达式来更新不同的state。例如当select调用updateForm()时,name="sex",value="male",则通过setState将state.sex值设为male。

5、组件间数据共享

当两个组件要同时使用一个变量时,由于state只能被它所定义的组件修改、访问,因此不能把state赋给某个组件,而应该将state提升至两个组件最近的公共父组件,父组件再通过props将值传递给子组件,这样两个子组件就都可以访问了。那么子组件怎么去修改父组件的state呢?子组件通过props属性来调用父组件的方法从而修改父组件的state,这样两个组件就通过父组件实现了对state的共享。例如父组件Parent的一个子组件ChildInput负责接收用户的输入,保存在state.text中,在另一个子组件ChildShow中显示用户的输入:

class Parent extends React.Component{
 constructor(props){
  super(props);
  this.state={
   text:''
  };
  this.updateText=this.updateText.bind(this);
 }
 updateText(value){
  this.setState({
   text:value
  })
 }
 render(){
  return (
   
     提升state    //父组件updateInput属性指向updateText方法                
  )  } } class ChildInput extends React.Component{  constructor(props){   super(props);   this.handleChange=this.handleChange.bind(this);  }  handleChange(e){    //在子组件的方法中调用父组件的updateInput更新text的值   this.props.updateInput(e.target.value);  }  render(){   return (    
         
  )  } } class ChildShow extends React.Component{  constructor(props){   super(props);    //通过调用父组件构造方法将父组件的props传递给子组件  }  render(){   return (    
     

输入为:{this.props.text}

   
  )  } } ReactDOM.render(  ,  document.getElementById('app') )

运行结果如图:

React中受控组件与数据共享的示例分析

上例在react中的数据流动如下:

1、当在input中中输入内容时,input内容改变onChange触发ChildInput组件的handleChange方法,该方法通过this.props调用父组件updateInput方法并传递输入的内容e.target.value。

2、父组件Parent在引用子组件ChildInput时为其定义updateInput属性为this.updateText方法,因此触发updateText方法,在该方法中接收子组件传递的参数value,并通过setState方法修改state.text的值。

3、当state.text值发生改变时,父组件Parent通过属性props将值传递给子组件ChildInput与ChildShow,引起子组件属性改变,从而子组件重新渲染页面内容。

以上是“React中受控组件与数据共享的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网站名称:React中受控组件与数据共享的示例分析
新闻来源:http://pwwzsj.com/article/jdjdoh.html