react中input框校验

React 中的 input 校验可以通过以下步骤实现：

1. 在 state 中定义一个变量来保存 input 输入的值和校验结果。

2. 在 input 组件中添加 onChange 事件处理函数，每次输入内容改变时更新 state 中的值。

3. 在 input 组件中添加 onBlur 事件处理函数，当 input 失去焦点时，进行校验，更新 state 中的校验结果。

4. 在 render 函数中根据 state 中的校验结果显示提示信息或者样式。

下面是一个简单的示例代码：

import React, { useState } from "react";

function InputWithValidation() {
  const [value, setValue] = useState("");
  const [isValid, setIsValid] = useState(false);

  function handleInputChange(event) {
    setValue(event.target.value);
  }

  function handleInputBlur() {
    setIsValid(value.length > 0);
  }

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={handleInputChange}
        onBlur={handleInputBlur}
      />
      {isValid ? null : <div style={{ color: "red" }}>请输入内容</div>}
    </div>
  );
}

在示例代码中，我们通过 useState 来定义两个状态变量 value 和 isValid，分别用来保存 input 的输入值和校验结果。在 input 组件中，我们添加了 onChange 和 onBlur 事件处理函数来更新这两个状态变量。在 render 函数中，我们根据 isValid 的值来显示提示信息或样式。