在 JSX 和 React 中使用 onBlur

Oluwafisayo Oluwatayo 2022年5月18日
在 JSX 和 React 中使用 onBlur

本教程将演示在 React 框架中实现 onBlur 函数。

在 JSX 和 React 中使用 onBlur

当单击要填写的表格时,onFocus 函数将激活,因为框架的该部分会突出显示。当用户向下移动到网页上的下一个项目时,该表单就会失去焦点。

这是 onBlur 功能激活的时候。onBlur 函数是在 React 框架上为网页添加出色效果的最佳方法之一。

在下面的项目中,我们将查看 onBlur 功能和 onFocus 功能。

在 JSX 和 React 的新项目中使用 onBlur

  • 首先,打开终端并通过键入 npx create-react-app new-project 创建一个新项目。
  • 创建新项目后,导航到应用程序文件夹并使用 npm start 启动一个新应用程序。
  • 然后,在文本编辑器中打开 App.js 文件并进行一些编码。
import React, { useState } from "react";
import "./App.css";

const App: React.FunctionComponent = () => {
    const [name, setName] = useState("");
    const [isValid, setIsValid] = useState(false);
    const [isFocus, setIsFocus] = useState(false);
    const [isBlur, setIsBlur] = useState(false);

    // Handling input onChange event
    const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
        setName(event.target.value);
    };

    // Handling input onFocus event
    const focusHandler = (event: React.FocusEvent<HTMLInputElement>) => {
        setIsFocus(true);
        setIsBlur(false);

        // Do something with event
        console.log(event);
    };

    // Handling input onBlur event
    const blurHandler = (event: React.FocusEvent<HTMLInputElement>) => {
        setIsFocus(false);
        setIsBlur(true);

        // Validate entered name
        if(name.match(/^[a-z][a-z\s]*$/i)){
            setIsValid(true);
        } else {
            setIsValid(false);
        }

        // Do something with event
        console.log(event);
    };

    return (
    <div className="container">
        <h3>Please enter your name:</h3>
        <input
            type="text"
            onFocus={focusHandler}
            onBlur={blurHandler}
            value={name}
            onChange={changeHandler}
            className="input"
            placeholder="Please enter your name"
        />
        {isFocus && (
            <span className="hint">
                Only letters and spaces are acceptable
            </span>
        )}
        {isBlur && !isValid && <p className="error">The name you entered is not valid</p>}
        {isBlur && isValid && <p className="success">The name you entered looks good</p>}
    </div>
    );
};

export default App;

我们可以添加以下代码来样式化和呈现网页。

.container {
    padding: 50px;
}

.input {
    padding: 8px 10px;
    width: 300px;
    font-size: 18px;
}

.hint {
    margin-left: 20px;
}

.error {
    color: red;
}

.success {
    color: blue;
}

输出:

在 JSX 和 React 输出中使用 onBlur

Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn