使用vue+react实现一个根据上方input输入的数字,下面对应展示相应数量的input输入框(一)

127 阅读1分钟

可以简单看下如下图片,没有做规则校验的和样式的处理的,感兴趣的同学可以做下,必须输入数字

Snipaste_2023-04-09_23-12-39.png

我们接下来使用vue和react都实现下:具体的逻辑会在代码注释中体现

1.vue2

<template>
  <div id="app">
    <div>
      层数:<input
        ref="myInput"
        type="text"
        placeholder="请输入层数"
        @change="handleChange"
      />
    </div>
    <ul>
      <li v-for="(_, index) in ary" :key="index">
        第{{ index + 1 }}层<input type="text" @change="handleChangeItem($event, index)" />
      </li>
    </ul>
    <button @click="handleClick">请求接口</button>
    <button @click="handleCannel">取消</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      resAry: [], //用于保存最终提交参数数据的数组
      ary: [], //用作循环展示input的循环空数组
    };
  },
  methods: {
    handleChange(e) {
      // 将输入的字符串转为数字
      const num = Number(e.target.value);
      // 定义一个num长的空数组
      this.ary = new Array(num);
      // 这个地方还需要做个判断,如果后续输入的数字小于原来的就要把数组截取
      if (this.resAry && num < this.resAry.length) {
        this.resAry = this.resAry.slice(0, num);
      }
    },
    handleChangeItem(e, idx) {
      // this.resAry.push(e.target.value);  这个地方不能用push,因为后续需要如何错位的填写就会有问题
      // 直接给对应的层数赋值
      this.resAry[idx] = e.target.value;
    },
    // 提交的操作
    handleClick() {
      // 这个地方请求接口发送请求展示别的内容
      // 最终的数据是一个数组
      console.log(this.resAry);
    },
    // 取消的操作
    handleCannel() {
      this.ary = [];
      this.resAry = [];
      this.$refs.myInput.value = "";
    },
  },
};
</script>

<style></style>

2.vue3+ts实现

<script setup lang="ts">
import { reactive, ref, Ref } from "vue";
// 不能单独的将ary定义为一个数据,那样的话会丢失响应式的,需要包括在一个对象中
// 对此有疑问的可以具体的看下reactive响应式原理
let data = reactive({
  ary: [] as string[],
  resAry: [] as string[],
});
// 获取input输入框这个dom元素是为了后续取消的操作
const myInput: Ref<HTMLInputElement | null> = ref(null);
// 输入层数的操作
const handleChange = (e: Event) => {
  // 下面两种方法都可以,就是ts的类型判定
  // const num = Number((<HTMLInputElement>e.target).value);
  const num = Number((e.target as HTMLInputElement).value);
  // 操作循环的数据,定义为num长度的,每一项都是空字符的数组
  data.ary = new Array(num).fill("");
  // 在这个地方还需要做个判断进行,输入的层数与原本展示的input数量对比的,需要截取数组
  if (data.resAry && num < data.resAry.length) {
    data.resAry = data.resAry.slice(0, num);
  }
};
// 每一层输入的操作
const handleChangeItem = (e: Event, idx: number) => {
  const value = (e.target as HTMLInputElement).value;
  data.resAry[idx] = value;
};
const handleClick = () => {
  //请求接口的最终参数
  console.log(data.resAry);
};
// 取消的操作,所有的数据都置空
const handleCannel = () => {
  data.resAry = [];
  data.ary = [];
  // 这个地方需要注意下,因为是用的ts
  (<HTMLInputElement>myInput.value).value = "";
};
</script>

<template>
  <div id="app">
    <div>
      层数:<input
        ref="myInput"
        type="text"
        placeholder="请输入层数"
        @change="handleChange($event)"
      />
    </div>
    <ul>
      <li v-for="(_, index) in data.ary" :key="index">
        第{{ index + 1 }}层<input type="text" @change="handleChangeItem($event, index)" />
      </li>
    </ul>
    <button @click="handleClick">请求接口</button>
    <button @click="handleCannel">取消</button>
  </div>
</template>

<style scoped></style>