在 React 中强制输入为大写

在 React 中强制输入为大写:

  1. 将输入的值存储在状态变量中。
  2. 在输入上设置 onChange 属性。
  3. 使用 toUpperCase() 方法将字段的值大写,例如 event.target.value.toUpperCase()。
import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  const handleChange = event => {
    const result = event.target.value.toUpperCase();

    setMessage(result);
  };

  return (
    <div>
      <div>hello zadmei.com</div>

      <input
        id="message"
        name="message"
        type="text"
        value={message}
        onChange={handleChange}
      />
    </div>
  );
};

export default App;

在 React 中强制输入为大写

我们在输入元素上设置了 onChange 属性,因此每次它的值发生变化时都会调用 handleChange 函数。

input 的值保证是字符串,即使输入的类型设置为数字,所以我们可以直接调用它的 toUpperCase 方法。

const str = 'hello zadmei.com';

const upper = str.toUpperCase();
console.log(upper); // 👉️ "HELLO ZADMEI.COM"

toUpperCase 方法返回一个新字符串,表示转换为大写的调用字符串。