迹忆客 专注技术分享

在 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 jiyik.com</div>

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

export default App;

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

event 对象上的 target 属性指的是输入字段，因此我们可以通过 event.target.value 访问输入的值。

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

const str = 'hello jiyik.com';

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

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