这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下
本文实例讲述了React学习之受控组件与数据共享。分享给大家供大家参考，具体如下：
在HTML当中，像,变为开放式标签：
3、select
同理，在React中的也通过value来控制哪个option的选中，并通过e.target.value将选中的option的值传给state。例如和this.state.sex值相同的option会被显示选中
男女
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 ( ) } } 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中的数据流动如下：
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学习之受控组件与数据共享实例分析的详细内容，更多请关注本站其它相关文章！
