如何将Input标签内的转大写逻辑迁移为组件方法？

嘿，这个重构其实挺 straightforward 的，核心就是把内联的逻辑抽成组件里的独立方法，这样代码更整洁也更易维护～下面分几种常见的场景给你具体演示：

在 Vue 组件中重构 #

把内联逻辑提取到组件的 methods 里，然后通过 @input 指令绑定到输入框上就行：

<template>
  <input type="text" @input="handleInputUpperCase" />
</template>

<script>
export default {
  methods: {
    handleInputUpperCase(e) {
      // 从事件对象拿到输入框元素
      const input = e.target;
      // 保存当前光标位置
      const cursorPos = input.selectionStart;
      // 把输入值转成大写
      input.value = input.value.toUpperCase();
      // 恢复光标位置，避免转大写后光标跳到末尾
      input.setSelectionRange(cursorPos, cursorPos);
    }
  }
}
</script>

在 React 组件中重构 #

React 里可以通过事件对象直接获取输入框，或者用 useRef 引用元素，两种方式都能实现：

方式1：通过事件对象获取（更简洁） #

function UpperCaseInput() {
  const handleInputUpperCase = (e) => {
    const input = e.target;
    const cursorPos = input.selectionStart;
    input.value = input.value.toUpperCase();
    input.setSelectionRange(cursorPos, cursorPos);
  };

  return <input type="text" onInput={handleInputUpperCase} />;
}

方式2：使用 useRef 引用元素 #

import { useRef } from 'react';

function UpperCaseInput() {
  const inputRef = useRef(null);

  const handleInputUpperCase = () => {
    const input = inputRef.current;
    if (!input) return;
    
    const cursorPos = input.selectionStart;
    input.value = input.value.toUpperCase();
    input.setSelectionRange(cursorPos, cursorPos);
  };

  return <input type="text" ref={inputRef} onInput={handleInputUpperCase} />;
}

原生 JS 自定义组件的重构 #

如果是用原生 JS 写自定义元素，思路也类似：

class UpperCaseInput extends HTMLElement {
  constructor() {
    super();
    const input = document.createElement('input');
    input.type = 'text';
    input.addEventListener('input', this.handleInputUpperCase.bind(this));
    this.appendChild(input);
  }

  handleInputUpperCase(e) {
    const input = e.target;
    const cursorPos = input.selectionStart;
    input.value = input.value.toUpperCase();
    input.setSelectionRange(cursorPos, cursorPos);
  }
}

// 注册自定义元素
customElements.define('upper-case-input', UpperCaseInput);

不管哪种场景，核心逻辑都是：保存光标位置 → 转换输入值为大写 → 恢复光标位置，只是绑定事件和获取元素的方式根据框架/环境略有不同而已～

内容的提问来源于stack exchange，提问作者Miro Goldstein