react数据双向绑定

最新推荐文章于 2024-05-10 17:13:45 发布

weixin_34344403

最新推荐文章于 2024-05-10 17:13:45 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：https://juejin.im/post/5c17b2e1f265da614c4cb604

本文详细介绍了如何在React中实现双向数据绑定，通过实例展示了文本输入框、单选按钮及下拉菜单的数据绑定过程，以及如何使用setState更新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先我们来创建一个组件,初始化一个变量来显示数据

 <div id="my"></div>

class Welcome extends React.Component{
          constructor() {
              super();       
              this.state = {  //修改setState     state初始化    一定要constructor中定义
                value:'12345'
              }   
            };
            
          render(){
           
            return (
              <div>
                <input type="text"  value={this.state.value} />
                <h1>{this.state.value}</h1>
              </div> 
            )
          }
        };
        ReactDOM.render(
          <div>
            <Welcome></Welcome>
          </div>,
          document.getElementById("my")
        );
    }复制代码

此时显示的是这样子的,我们并不能改变,value的值

如果想实现双向绑定的效果,需要在input输入框中加一个onChange事件

即<input type="text"  value={this.state.value} 
onChange={(event)=>this.handleChange(event)}/>

复制代码

在这个事件中把取到得值用setState重新写在定义的state里面,我们就实现了react 的双向数据绑定了!

handleChange(event){
              console.log(event.target);
              this.setState({value:event.target.value})
            };复制代码

以下是整合后的代码!包括单选和下拉,道理都是差不多的哦!

<body>
    <div id="my"></div>

    <script type="text/babel">
    window.onload = function(){
        /*组件的定义有二种，第二种es6  class*/
        class Welcome extends React.Component{
          constructor() {
              super();      
              this.state = {  //修改setState     state初始化    一定要constructor中定义
                value:'12345',
                male:'man',
                select:'red'
              }   
            };
            handleChange(event){
              console.log(event.target);
              this.setState({value:event.target.value})
            };

            handleRadio(event){
              console.log(event.target);
              this.setState({male:event.target.value})
            };

            handleSelect(event){
              this.setState({select:event.target.value})
          }

           handleSubmit() {
            alert(JSON.stringify(this.state))
          }
          render(){
            var arr =['北京','上海','杭州啊'];
            return (
              <div>
                
                <input type="text"  value={this.state.value} onChange={(event)=>this.handleChange(event)}/>
                <h1>{this.state.value}</h1>

                <div>
                

                  <input type="radio" name="radioName" checked={this.state.male =='man' ? true :false} value="man" onChange={(event)=>this.handleRadio(event)}/>男
                  <input type="radio" name="radioName" checked={this.state.male =='woman' ? true :false} value="woman" onChange={(event)=>this.handleRadio(event)}/>女


                  <div>
										<br/>地址:
										<select value={this.state.select} onChange={(event)=>this.handleSelect(event)}>
                    {
                      arr.map(function(item,index){
                        return  <option  key={index} value={item}>{item}</option>
                      })
                    }

                  </select>
									</div>
									<br/>
                  <button onClick={()=>this.handleSubmit()}>提交</button>
                </div>
              </div>
            )
          }
        };
        ReactDOM.render(
          <div>
            <Welcome></Welcome>
          </div>,
          document.getElementById("my")
        );
    }

    </script>
  </body>复制代码