ReactJS-input onBlur事件示例

在这篇文章中，学习Input blur event handler in react application application 和简单的输入模糊事件使用实例。

Reactjs提供了一个与用户表单上的输入元素绑定的onBlur 事件。onBlur 是一个javascript模糊事件，可以对其附加回调处理程序，在输入失去焦点时调用。

句法

<input onBlur="eventHandler">

onBlur 是与一个输入元素绑定的事件处理程序，事件处理程序是一个组件中的函数，当输入焦点丢失时执行。

eventHandler= event => {

}

onBlur event in Reactjs 可以在以下情况下使用

• 存储表单输入的值 - 单向绑定
• 对输入字段进行验证。

从头开始创建React应用程序

create-react-app 命令创建具有所有文件和构建管道的新应用程序。它提供了所有最新的 reactjs 和它们的依赖性。

npx create-react-app react-input-blur

Success! Created react-input-blur at B:\blog\jswork\react-input-blur
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    , and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-input-blur
  yarn start

创建了react应用react-input-blur ，有了项目结构，安装了依赖项，并开始运行应用。

进入应用程序的根文件夹，用以下方式启动服务器npm start

cd react-input-blur
npm start
react-input-blur@0.1.0 start B:\blog\jswork\react-input-blur
react-scripts start
Compiled successfully!

You can now view react-input-blur in the browser.

  Local:            http://localhost:3002

React应用运行于localhost:3002

react onBlur输入事件示例

以下是一个在输入焦点消失后显示输入值的例子。

• 通过扩展Component 类创建一个react组件
• 在Render函数中，输入被定义为名称与onBlur 事件绑定到回调处理器onBlurEvent 。
• onBlurEvent 有一个带有事件的方法，持有当前输入元素的数据。
• 在构造函数中，初始化了props对象并创建了一个带有默认表单值的state对象
• 在状态对象中，表单名称最初被初始化为空值
• 在输入焦点丢失期间，即用户打字并将焦点从输入框中移开，模糊事件被执行，onBlurEvent 函数使用event.target.value 得到数值，并使用setState({name:value}) 方法用这个数值更新状态。
• 在渲染函数中，从状态对象中获取名称并显示给用户。

import React, { Component } from "react";

class InputBlurComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
        }
    }

    onBlurEvent = event => {
        const { value } = event.target;
        this.setState({ name: value })
    };

    render() {
        const { name } = this.state;
        return (
            <div >
                <input
                    type="text"
                    name="name"
                    placeholder="Enter a name"
                    onBlur={this.onBlurEvent}
                />
                {name}
            </div>
        );
    }
}
export default InputBlurComponent;

如何在React应用程序中添加输入模糊验证

blur 事件的另一个重要事项是在输入元素处启用验证。 以下是一个在焦点离开元素时进行输入空检查验证的例子。 在这个例子中，正则表达式模式处理输入内联验证。

import React, { Component } from "react";

class InputBlurComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            isValid: true,
        }
    }
    onBlurEvent = event => {
        const { value } = event.target;
        const urlRegEx = /^\s+$|^$/gi;
        let isValid = urlRegEx.test(event.target.value);
        isValid = !value;
        this.setState({
            name: value,
            isValid
        });

        console.log('result ', isValid);

        return isValid;
    };

    submitForm = () => {
        const { name } = this.state;
        console.log("entered name", name);
    };

    render() {
        const { isValid, name } = this.state;
        return (
            <div className="App">

                <form>
                    <input
                        type="text"
                        name="name"
                        placeholder="Enter a name"
                        onBlur={this.onBlurEvent}
                        onChange={this.onChange}
                    />
                    {isValid && (
                        <div style={{ color: "red" }}>Name is required</div>
                    )}
                    <br></br>
                    <button onClick={this.submitForm} disabled={!isValid}>
                        Submit
          </button>
                </form>

            </div>
        );
    }
}
export default InputBlurComponent;

如何在React中用onblur事件提交输入表单

有时，我们想让用户在模糊事件中提交表单，这样，提交表单时就会显示验证错误。

• React refs "提供了触发表单的一些动作。
• 在组件构造函数中使用React.createRef ，以使它在整个react组件生命周期中可用。
• 使用ref属性在表单中绑定创建的 refref={this.myRef}
• onBlur事件处理程序，使用this.myRef.current 访问refs，返回表单。
• 提交表单时使用this.myRef.current.submit()

import React, { Component } from "react";

class InputBlurComponent extends Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();

    }
    submitNameForm = event => {
        const { value } = event.target;
        this.myRef.current.submit()
    };

    render() {
        return (
            <form ref={this.myRef} >
                <input type="name" onBlur={this.submitNameForm} />
            </form>

        );
    }
}

export default InputBlurComponent;

结论

在本教程中，反应应用程序中的基本onBlur事件

• 存储输入数据的基本onBlur事件的例子
• 输入表单验证
• 使用onBlur事件提交用户表单

最后，onBlur 事件对于处理表单验证非常有用，有助于简化用户表单的处理。