React 中使用正则表达式验证输入框的值

在 React 中，可以通过使用 useState 钩子来定义一个 state 变量，并给它添加一个正则表达式验证。

首先，需要导入 React 和 useState 钩子：

import React, { useState } from 'react';

然后，在函数组件中，使用 useState 钩子来定义 state 变量 a 以及设置初始值为空字符串：

const [a, setA] = useState('');

接下来，可以使用正则表达式来验证 a 的值。可以在 handleChange 函数中进行验证，该函数将在输入框的值发生变化时被调用：

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

  // 使用正则表达式验证
  if (/1\d{10}/.test(value)) {
    setA(value);
  } else {
    // 如果不符合正则表达式，则清空 a 的值
    setA('');
  }
};

最后，在组件的 JSX 中，可以将 handleChange 函数绑定到输入框的 onChange 事件，并将 a 的值作为输入框的值：

<input type='text' value={a} onChange={handleChange} />

完整的组件代码如下：

import React, { useState } from 'react';

const MyComponent = () => {
  const [a, setA] = useState('');

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

    // 使用正则表达式验证
    if (/1\d{10}/.test(value)) {
      setA(value);
    } else {
      // 如果不符合正则表达式，则清空 a 的值
      setA('');
    }
  };

  return (
    <div>
      <input type='text' value={a} onChange={handleChange} />
    </div>
  );
};

export default MyComponent;

这样，就在 React 中定义了一个名为 a 的 state 变量，并通过正则表达式验证其值。只有当输入框的值符合正则表达式/1\d{10}/时，a 的值才会被更新，否则 a 的值将为空字符串。