007-ant design 对象属性赋值,双向绑定

1、state对象属性赋值

设对象为

state={
 datavalue:{
      id:‘‘,
      name:‘‘,
     },
}

修改对象属性为:

SetName=(e)=>{
      let val=e.target.value;
      let data = Object.assign({}, this.state.datavalue, { name: val })
      this.setState({
        datavalue: data
      })
      console.log(this.state.datavalue,data)
}

2、双向绑定

// 第一个
         {getFieldDecorator(‘note‘, {
            rules: [{ required: true, message: ‘Please input your note!‘ }],
          })(
            <Input />
          )}
// 第二个
          {getFieldDecorator(‘gender‘, {
            rules: [{ required: true, message: ‘Please select your gender!‘ }],
          })(
            <Select
              placeholder="Select a option and change input text above"
              onChange={this.handleSelectChange}
            >
              <Option value="male">male</Option>
              <Option value="female">female</Option>
            </Select>
          )}

绑定值:

  handleSelectChange = (value) => {
    console.log(value);
    this.props.form.setFieldsValue({
      note: `Hi, ${value === ‘male‘ ? ‘man‘ : ‘lady‘}!`,
    });
  }

原文地址:https://www.cnblogs.com/bjlhx/p/9410694.html

时间: 2024-08-13 00:37:49

007-ant design 对象属性赋值,双向绑定的相关文章

Angular2-无法给元素的属性做双向绑定,除非这个属性是指令或者组件

呈现一个实体对象的DOM结构,这个DOM有个自定义属性是需要动态赋值的,比如说 item.data 要绑到自定义属性 data 上:你可能会这么写: data="{{item.data}}" ,但直接用插值语法会报错的. Angular2无法给非指令或者组件做双向绑定. 如果非要这么做,这里有个这种方案:自定义一个指令:"data"专门接收"item.data"数据,然后在指令内部做操作,将data数据绑上去. 示例如下: @Directive(

关于vue的计算属性以及双向绑定的原理理解(vue2.x)以及vue3.0

vue的计算属性: 1.什么是计算属性? 计算属性的目的是用于对数据进行简单运算的,若在模板中放过多的计算逻辑会导致模板难以维护. 计算属性是基于它们的依赖进行缓存的.计算属性只有在它的相关依赖发生改变时才会重新求值. 2.计算属性如何使用? 1.在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调用等,只要最终返回一个结果就可以. computed: { reverseText: function(){ return app1.text.split('').reverse().join('

JavaScript对象属性赋值操作的逻辑

对象进行属性赋值操作时,其执行逻辑如下所示: 1. 当前对象中是否有该属性?有,进行赋值操作:没有,进行下一步判断. 2. 对象的原型链中是否有该属性?没有,在当前对象上创建该属性,并赋值:有,进行下一步判断. 3. 原型链中该属性是否允许操作?是,在当前对象上创建同名属性,并赋值:否,属性赋值失败. 无论是属性赋值还是新建属性,都是在当前对象上进行的,不会修改原型链!第三种情况下,新建的属性将会覆盖对象从原型链继承来的同名属性.

MyBatis拦截器:给参数对象属性赋值

1 package com.development; 2 3 import java.lang.reflect.InvocationTargetException; 4 import java.util.Date; 5 import java.util.Map; 6 import java.util.Properties; 7 8 import org.apache.commons.beanutils.BeanUtils; 9 import org.apache.ibatis.executor.

JS中undefined、null以及NaN之间的区别,以及对象属性赋值的面试题

(1)以下三种情况typeof 返回类型为undefined --当变量未初始化时 --变量未定义时 --函数无明确返回值时(函数没有返回值时返回的都是undefined) (2)Null 类型 undefined 是由null派生处理的,因此undefined == null undefined 是声明了但是没有初始化的该变量, null表示尚未存在的对象 . (3)NaN 值 是一个特殊值,表示非数(Not a Number),类型转换失败就会返回NaN --NaN 不等于自己,即 NaN

【Java EE 学习第69天】【struts2】【paramsPrepareParamsStack拦截器栈解决model对象和属性赋值冲突问题】

昨天有同学问我问题,他告诉我他的Action中的一个属性明明提供了get/set方法,但是在方法中却获取不到表单中传递过来的值.代码如下(简化后的代码) 1 public class UserAction implements modelDriven<User>(){ 2 private String name; 3 private User model; 4 public void setName(String name){ 5 this.name=name; 6 } 7 public St

事件双向绑定原理

事件 案例: vue的事件绑定原理:改变图片的背景颜色问题来实现这个框架的使用方法, new Vue({ el:"", data:{}, methord:{}, computed:{}   计算属性的使用:用于大量基于数据模型的计算,但并不是每一次渲染都发生更改,计算属性就会将数据直接返回,这样提高计算效率. mounthd:{} }) 我们在事件绑定的时候传入参数:比如点击事件,@click=“funname($event,index)” <!DOCTYPE html>

vue事件双向绑定

事件 案例: vue的事件绑定原理:改变图片的背景颜色问题来实现这个框架的使用方法, new Vue({ el:"", data:{}, methord:{}, computed:{}   计算属性的使用:用于大量基于数据模型的计算,但并不是每一次渲染都发生更改,计算属性就会将数据直接返回,这样提高计算效率. mounthd:{} }) 我们在事件绑定的时候传入参数:比如点击事件,@click="funname($event,index)" vue数据的双向绑定 &

VUE JS 使用组件实现双向绑定

1.VUE 前端简单介绍  VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据set时,在数据属性上添加监控,这样数据发生改变时,就会触发他上面的watcher,而ANGULARJS 是使用脏数据检查来实现的. 另外VUEJS 入门比ANGULARJS 简单,中文文档也很齐全. 2.组件实现    在使用vue开发过程中,我们会需要扩展一些组件,在表单中使用,比如一个用户选择器.