无状态（受控）输入

Question

无状态输入表示仅当父级的：value绑定发生更改时，它才会更改。可以完全控制其显示内容，这对于蒙版和滤镜非常有用。

我有什么

此解决方案是我最需要的解决方案：https://codesandbox.io/s/mm9n7r08mx

现有解决方案的问题

当我尝试在现有文本中间键入内容时，光标会跳到结尾。

我需要什么

任何适用于无状态输入的解决方案或解决现有问题的方法。

我找到的材料

• React issue
• 为信用卡输入http://jsbin .com/dunutajuqo做些小事

Answer 1

它正在跳跃，因为您正在手动为该字段分配一个值。在输入事件期间，您无需重新设置值。此时该值已经同步。在此处发布完整的代码blurb，以便其他人有上下文：

<template>
  <input
    class="com-input"
    :value="value"
    @input="setValue"
    :placeholder="placeholder"
  >
</template>

<script>
export default {
  name: "ComInput",
  props: {
    value: {
      type: String
    },
    placeholder: {
      type: String
    }
  },
  methods: {
    setValue($event) {
      const value = $event.target.value;
      $event.target.value = this.value; // <-- DELETE THIS
      this.$emit("input", value);
    }
  }
};
</script>