实现表单数据双向绑定 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

拾金日记之记录青训营大项目MinEx-UI组件库开发

其实这是我第一次参与react项目开发，之前都是做vue开发。没有时间系统的学习，直接利用以前的思维上手了一个具有挑战性的react项目，难免碰到了很多很基础的问题。

react

1、绑定表单的value属性值到state中的变量监听表单控件的onChange事件；

2、当表单发生变化的时候触发绑定事件函数handleChange()，利用绑定事件传入的event.target获取变化事件对象，通过event.target.value获取相应事件变化的更新值

3、通过将state中的value重新赋值实现数据的绑定显示

import React, { Component } from 'react'

export default class App extends Component {
   state = {
       inpVal: 'pyq'
   }
   handleChange = (e) => {
        const newVal = e.target.value
        this.setState({
            inpVal: newVal
        })
   }

   render() {
       return (
           <div>
               <label htmlFor="inp">{this.state.inpVal}</label>
               <input type="text" id="inp" value={this.state.inpVal} onChange={this.handleChange} ></input>
           </div>
       )
   }
}

Vue

在vue中可以使用vue封装好的v-model实现数据的双向绑定。

<input v-model="searchText" />

但是v-model的原理也让我很感兴趣。上面的代码其实等价于下面这段：

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

而当使用在一个组件上时，v-model 会被展开为如下的形式：

<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

要让这个例子实际工作起来，<CustomInput> 组件内部需要做两件事：

1. 将内部原生 <input> 元素的 value attribute 绑定到 modelValue prop
2. 当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件

这里是相应的代码：

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

现在 v-model 可以在这个组件上正常工作了：

<CustomInput v-model="searchText" />

总结

其实react和vue实现数据双向绑定的原理都是一样的，同样都是

1. 绑定原生组件input的value值；
2. 并将自定义事件绑定到原生事件（onclick、onchange等）上；
3. 然后触发原生事件后通过自定义事件修改原生组件的value，从而达到数据双向绑定的目的。