React双向绑定，详细案例。

一时失言乱红尘 2022-11-21 01:21 177阅读 0赞

思路：可以为每个元素添加一个 name 属性(通常和数据名一致)，处理函数根据 `event.target.name`的值来决定修改那条数据。

<div id="box"></div>
        <script type="text/babel">
          class Demo extends React.Component{
              constructor(props){
                  super(props)
                  this.state={
                    name:"xiaobai",
                    age:"18",
                    sex:"男"
                  }
              }
              add(e){
                  let newage=e.target.value
                  this.setState({
                   [e.target.name]:newage
                  },()=>{
                      console.log(e.target.name)
                  }) 
              }
              fun=()=>{
                  return (
                        <div>
                            <h1>名字---{this.state.name}</h1>
                            <input type="text" name="name" onChange={(e)=>this.add(e)}/>
                            <h1>年龄---{this.state.age}</h1>
                            <input type="text" name="age" onChange={(e)=>this.add(e)}/>
                            <h1>性别---{this.state.sex}</h1>
                            <input type="text" name="sex" onChange={(e)=>this.add(e)}/>
                        </div>
                  )
              }
              render(){
                return (
                    <div>
                        oninput测试
                        {this.fun()}
                    </div>
                )
          }
          }
          ReactDOM.render(<Demo/>,document.getElementById("box") )
        </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue--双向绑定

原文网址：[Vue--双向绑定\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址 > [父子组件prop值的双向绑定][prop] 简

忘是亡心i/ 2022年12月21日 06:24/ 0 赞/ 260 阅读

相关 Vue双向绑定

实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发

清疚/ 2022年11月27日 10:21/ 0 赞/ 236 阅读

相关 React双向绑定，详细案例。

思路：可以为每个元素添加一个 name 属性(通常和数据名一致)，处理函数根据 `event.target.name`的值来决定修改那条数据。 <div id="bo

一时失言乱红尘/ 2022年11月21日 01:21/ 0 赞/ 178 阅读

相关 VUE双向绑定

1、什么是setter、getter ？　　答：首先，别误以为他们就是一会要说的get、set，我们先看一句定义： > 对象有两种属性：（1）数据属性，

r囧r小猫/ 2022年11月07日 13:16/ 0 赞/ 31 阅读

相关 VUE双向绑定

转自：http://www.cnblogs.com/qiuchuanji/p/8819697.html Vue是一个提供了MVVM风格的双向数据绑定的Javascr

小鱼儿/ 2022年05月23日 08:17/ 0 赞/ 364 阅读

相关 angular 双向绑定

Can't bind to 'ngModel' since it isn't a known property of 'input'. 原因:库未引用完整解决:

古城微笑少年丶/ 2022年05月20日 06:45/ 0 赞/ 302 阅读

相关【react】react实现类似vue的双向数据绑定

import React from 'react' import ReactDOM from 'react-dom' class Commen

「爱情、让人受尽委屈。」/ 2022年04月18日 05:06/ 0 赞/ 277 阅读

相关 react数据双向绑定

1，page页面 import React, { PureComponent } from 'react'; import { findDOMNode } f

待我称王封你为后i/ 2022年04月04日 12:38/ 0 赞/ 324 阅读

相关 React简单实现双向数据绑定

import React, { Component } from 'react' import ReactDOM from 'react-dom'

小鱼儿/ 2021年12月23日 11:49/ 0 赞/ 447 阅读

相关 React双向数据绑定

React双向数据绑定前言：React中的双向绑定是没有提供的，相比vue需要手动写，不过也比较简单，下面看代码示例。什么是双向数据绑定？ PS：m

今天药忘吃喽~/ 2021年09月29日 02:48/ 0 赞/ 437 阅读