react 表单  双向绑定的实现

view on github

在 react 开发中，经常遇到 input 输入框改变值的时候，要定义一个函数，该函数内部执行 setState 的操作，才能改变 input 的值。如果表单元素多了以后，就会定义很多的这种函数，使代码变得冗余。下面在 react 中实现一个类似于 vue 的表单双向绑定的逻辑。

修改表单的值，只需如下操作：

而且不用关心表单 onchange 的事件逻辑，表单 onchange 时会自动更新 state 中的值。

核心代码实现如下：

使用如下：

这样巧妙运用get，set方法来实现react表单双向绑定，就会在开发者简化很多代码。