React中input动态绑定值

React动态绑定input输入框的值

首先,我们回顾一下vue中的input动态绑定值是用的v-model指令,但是react中没有指令这一玩意儿,那怎么实现数据动态绑定呢?请看下面解释。

没错,我们很多小伙伴肯定会想得到在state中定义一个值,然后,通过input的value属性进行绑定,但是仔细想一想,我们就会发现下面这种操作其实就是给value赋了一个空值。从而导致的结果呢就是,你的input框不能输入任何东西。
在这里插入图片描述
其实写成上面这个样子已经成功一半了,我们只需为input添加一个onChange事件,如图:
在这里插入图片描述
我们使用onChange事件去监听input输入框的改变,并且通过 .bind(this)将constructor传入到我们的方法中,接下来就可以随心所欲的在input框中输入值了。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值