站长资源 网络编程

React学习之受控组件与数据共享实例分析

整理:jimmy2026/7/29浏览2次

简介本文实例讲述了React学习之受控组件与数据共享。分享给大家供大家参考，具体如下：在HTML当中，像,

, 和 <select>这类表单元素会自己储存值，并且根据用户输入进行更新。但在React中，可变的值通常保存在组件的state中，并且只能用 setState(</div>
                <div class="news_infos"><div id="MyContent"><p>本文实例讲述了React学习之受控组件与数据共享。分享给大家供大家参考，具体如下：</p>
<p>在HTML当中，像<input>,<textarea>, 和 <select>这类表单元素会自己储存值，并且根据用户输入进行更新。但在React中，可变的值通常保存在组件的state中，并且只能用 setState() 方法进行更新。为了解决二者的矛盾，可以让HTML元素不再自己储存数据，而使用来自于react的state。也就是说HTML元素把数据保存在react组件的state中，并根据state值来渲染更新HTML的内容。这种值由React控制的表单元素称为受控组件。</p>
<h2>1、input</h2>
<p>例如将input输入的名字保存在state.name中，并且设置input显示的value值为state.name。当input中输入变化时，onChange触发updateName函数更新name值，从而使input中显示的value发生变化。当点击提交按钮时onClick触发submit()方法来阻止默认的提交，并打印提示信息：</p>

<div class="htmlcode">
<pre class="brush:js;">
class ControlledForm extends React.Component{
 constructor(props){
  super(props);
  this.state={
   name:''
  };
  this.updateName=this.updateName.bind(this);
  this.submit=this.submit.bind(this);
 }
 updateName(e){        //在调用函数时会默认传入时间参数e
  this.setState({
   name:e.target.value    //更新name的值为input中输入的值
  })
 }
 submit(e){          //自己定义点击submit后的操作
  console.log("姓名"+this.state.name+"提交成功");
  e.preventDefault();     //阻止表单默认提交行为
 }
 render(){
  return (
   <form onSubmit={this.submitForm}>
     <label>
       姓名：
       <input type="text" value={this.state.name} onChange={this.updateName} />
     </label>
     <input type="submit" value="提交" onClick={this.submit} />
   </form>
  )
 }
}

</pre>
</div>

<p>使用受控组件使得页面的数据都处于react的控制之下，而且可以对其数据进行处理之后再渲染到页面上。</p>
<h2>2、textarea</h2>
<p>在React中使用<textarea>：为了对textarea的输入内容进行控制，react中的textarea像input一样由value来控制其显示的值，并且通过e.target.value将textarea中的值存入state中。textarea的使用也由闭合式标签<textarea></textarea>变为开放式标签：</p>

</pre>
</div>

<h2>3、select</h2>
<p>同理，在React中的<select>也通过value来控制哪个option的选中，并通过e.target.value将选中的option的值传给state。例如和this.state.sex值相同的option会被显示选中</p>

</pre>
</div>

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

<div class="htmlcode">
<pre class="brush:js;">
<select value={this.state.sex} name="sex" onChange={this.updateForm}>
updateForm(e){
 let name=e.target.name;     //获取组件的name
 let value=e.target.value;    //获取组件的值value
 this.setState({
  [name]:value         //为不同name的组件设置value
 })
}

</pre>
</div>

<p>在setState方法中，通过ES6的语法计算属性[]，在中括号中指定要更新的属性名的表达式来更新不同的state。例如当select调用updateForm()时，name="sex",value="male"，则通过setState将state.sex值设为male。</p>
<h2>5、组件间数据共享</h2>
<p>当两个组件要同时使用一个变量时，由于state只能被它所定义的组件修改、访问，因此不能把state赋给某个组件，而应该将state提升至两个组件最近的公共父组件，父组件再通过props将值传递给子组件，这样两个子组件就都可以访问了。那么子组件怎么去修改父组件的state呢？子组件通过props属性来调用父组件的方法从而修改父组件的state，这样两个组件就通过父组件实现了对state的共享。例如父组件Parent的一个子组件ChildInput负责接收用户的输入，保存在state.text中，在另一个子组件ChildShow中显示用户的输入：</p>

<div class="htmlcode">
<pre class="brush:js;">
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 (
   <fieldset>
     <legend>提升state</legend>    //父组件updateInput属性指向updateText方法
     <ChildInput text={this.state.text} updateInput={this.updateText}/>
     <ChildShow text={this.state.text} />
   </fieldset>
  )
 }
}
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 (
   <div>
     <label>
       请输入：
       <input type="text" value={this.props.text} onChange={this.handleChange}/>
     </label>
   </div>
  )
 }
}
class ChildShow extends React.Component{
 constructor(props){
  super(props);    //通过调用父组件构造方法将父组件的props传递给子组件
 }
 render(){
  return (
   <div>
     <p>输入为：{this.props.text}</p>
   </div>
  )
 }
}
ReactDOM.render(
 <Parent/>,
 document.getElementById('app')
)

</pre>
</div>

<p>运行结果如图：</p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20201694555964.png');"><img src="/UploadFiles/2021-04-02/20201694555964.png" alt="React学习之受控组件与数据共享实例分析" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p>上例在react中的数据流动如下：</p>
<p>1、当在input中中输入内容时，input内容改变onChange触发ChildInput组件的handleChange方法，该方法通过this.props调用父组件updateInput方法并传递输入的内容e.target.value。</p>
<p>2、父组件Parent在引用子组件ChildInput时为其定义updateInput属性为this.updateText方法，因此触发updateText方法，在该方法中接收子组件传递的参数value，并通过setState方法修改state.text的值。</p>
<p>3、当state.text值发生改变时，父组件Parent通过属性props将值传递给子组件ChildInput与ChildShow，引起子组件属性改变，从而子组件重新渲染页面内容。</p>
<p>希望本文所述对大家React程序设计有所帮助。</p></div>
</div>
            </div>
            <div class="share"> </div>
            <div class="nextinfo">
                <p>上一篇：<a href="/3g/1/82216.html" title="借助云开发实现小程序短信验证码的发送">借助云开发实现小程序短信验证码的发送</a></p>
                <p>下一篇：<a href="/3g/1/82218.html" title="Node.js创建一个Express服务的方法详解">Node.js创建一个Express服务的方法详解</a></p>
            </div>
            <div class="otherlink">
                <h2>最新资源</h2>
                <ul>
                     
<li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li>
 
<li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
 
<li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
 
<li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li>
 
<li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li>
 
<li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li>
 
<li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li>
 
<li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li>
 
<li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li>
 
<li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li>

</ul>
            </div>
        </div>
        <div class="sidebar">
            
            
        </div>
        <div class="sidebar">
            友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a>
        </div>
    </article>
    <footer>
        <p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p>
    </footer>
    <script src="/images3g/nav.js"></script>
    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(function() {
        var elm = jQuery('#left_flow2');
        var startPos = jQuery(elm).offset().top;
        jQuery.event.add(window, "scroll", function() {
            var p = jQuery(window).scrollTop();
            jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');

jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
        });
    });
    </script>
</body>

</html>