on方法 react 表单事件_react 表单事件 - CSDN
  • react事件大全

    2020-07-15 08:25:08
    有以下几种事件类型 React事件 中断类事件 定时触发的事件 复制类事件 组件类事件 键盘类事件 表单事件 焦点类事件 鼠标类事件 选择器类事件 触摸类事件 插件类事件事件 多媒体类事件 图片类事件 动画类事件 ...

    有以下几种事件类型 React的事件
    中断类事件

    定时触发的事件

    复制类事件

    组件类事件

    键盘类事件

    表单类事件

    焦点类事件

    鼠标类事件

    选择器类事件

    触摸类事件

    插件类事件

    轮事件

    多媒体类事件

    图片类事件

    动画类事件

    转换类事件

    中断类事件-stoppropagation和preventdefault用于中断事件的传递

    • preventdefault 用于组织默认事件的执行,但是绑定在上面的其他事件可以正常执行
      例如,
    <a src="http://www.baidu.com" onClick="alert(1111)"></a>
    

    baidu不会打开,但是会弹出对话框eventName.preventdefault()事件中断。

    • stoppropagation 中断冒泡事件向上的传递。

    定时触发的事件

    • setTimeout //定时触发

    复制类事件

    • onCopy //copy元素内容时触发
    • onCut //内容剪切时触发
    • onPaste //粘贴时触发

    组件类事件

    • onCompositionEnd
    • onCompositionStart
    • onCompositionUpdate

    键盘类事件

    • onKeyDown //按下键盘按键时触发
    • onKeyPress //按下键盘按键并松开时触发
    • onKeyUp //放开先前按下的 按键时触发

    表单类事件

    • onChange //内容改变时触发
    • onInput //事件在用户输入时触发
    • onSubmit //提交时触发

    焦点类事件

    • onFocus //获得焦点时触发
    • onBlur //失去焦点时触发

    鼠标类事件

    • onClick
    • onContextMenu
    • onDoubleClick
    • onDrag
    • onDragEnd
    • onDragEnter
    • onDragExit
    • onDragLeave
    • onDragOver
    • onDragStart
    • onDrop
    • onMouseDown
    • onMouseEnter
    • onMouseLeave
    • onMouseMove
    • onMouseOut
    • onMouseOver
    • onMouseUp

    选择器类事件

    • onSelect //事件会在文本框中的文本被选中时发生。

    触摸类事件

    • onTouchCancel //一般在一些高级事件发生时,触发取消touch事件。例如暂停游戏,存档等。
    • onTouchEnd //移走手指时触发
    • onTouchMove //移动手指时触发

    插件类事件

    • onScroll //元素滚动时执行 JavaScript

    轮事件

    • onWheel //事件在鼠标滚轮在元素上下滚动时触发。

    多媒体类事件

    • onAbort
    • onCanPlay
    • onCanPlayThrough
    • onDurationChange
    • onEmptied
    • onEncrypted
    • onEnded
    • onError
    • onLoadedData
    • onLoadedMetadata
    • onLoadStart
    • onPause
    • onPlay
    • onPlaying
    • onProgress
    • onRateChange
    • onSeeked
    • onSeeking
    • onStalled
    • onSuspend
    • onTimeUpdate
    • onVolumeChange
    • onWaiting

    图片类事件

    • onLoad //事件会在页面或图像加载完成后立即发生。
    • onError //事件会在文档或图像加载过程中发生错误时被触发。

    动画类事件

    • onAnimationStart //动画开始时调用
    • onAnimationEnd //动画结束时调用。但有点问题是连续播放时可能不会触发
    • onAnimationIteration

    转换类事件

    • onTransitionEnd
    展开全文
  • React组件事件响应React在构建虚拟DOM的同时,还构建了自己的事件系统;且所有事件对象和W3C规范保持一致。React事件系统和浏览器事件系统相比,主要增加了两个特性:事件代理、和事件自动绑定。1、事件代理区别于...

    React组件事件响应

    • React在构建虚拟DOM的同时,还构建了自己的事件系统;且所有事件对象和W3C规范
      保持一致。
    • React的事件系统和浏览器事件系统相比,主要增加了两个特性:事件代理、和事件自动绑定

    1、事件代理

    1. 区别于浏览器事件处理方式,React并未将事件处理函数与对应的DOM节点直接关联,而是在顶层使用
      了一个全局事件监听器监听所有的事件;
    2. React会在内部维护一个映射表记录事件与组件事件处理函数的对应关系;
    3. 当某个事件触发时,React根据这个内部映射表将事件分派给指定的事件处理函数;
    4. 当映射表中没有事件处理函数时,React不做任何操作;
    5. 当一个组件安装或者卸载时,相应的事件处理函数会自动被添加到事件监听器的内部映射表中或从表中删除。

    2、事件自动绑定

    1. 在JavaScript中创建回调函数时,一般要将方法绑定到特定的实例,以保证this的正确性;

    2.在React中,每个事件处理回调函数都会自动绑定到组件实例(使用ES6语法创建的例外);

    1. 注意:事件的回调函数被绑定在React组件上,而不是原始的元素上,即事件回调函数中的
      this所指的是组件实例而不是DOM元素;
    2. 了解更多React中的thisReact组件中的this

    3、合成事件

    与浏览器事件处理稍微有不同的是,React中的事件处理程序所接收的事件参数是被称为“合成事件(SyntheticEvent)”的实例。
    1. 合成事件是对浏览器原生事件跨浏览器的封装,并与浏览器原生事件有着同样的接口,如stopPropagation(),preventDefault()等,并且
      这些接口是跨浏览器兼容的。
    2. 如果需要使用浏览器原生事件,可以通过合成事件的nativeEvent属性获取
    3. React合成事件原理

    使用JSX,在React中绑定事件:

    <button onClick={this.onClick}>
        单击触发react事件
    </button>
    • React并不是将click事件绑在该div的真实DOM上,而是在document处监听所有支持的事件,当事件发生并冒泡至document处时,React将事件内容封装并交由真正的处理函数运行

    图片描述

    1. 每个合成事件有以下通用属性:
        - boolean bubbles
        - boolean cancelable
        - DOMEventTarget currentTarget
        - boolean defaultPrevented
        - number eventPhase
        - boolean isTrusted
        - DOMEvent nativeEvent
        - void preventDefault()
        - boolean isDefaultPrevented()
        - void stopPropagation()
        - boolean isPropagationStopped()
        - DOMEventTarget target
        - number timeStamp
        - string type
    • 注意:现版本React在事件处理程序通过中返回false停止传播,已不可用;
      取而代之的是需要手动调用e.stopPropagation()或e.preventDefalult().

    React支持的常用事件

    1、剪贴板事件

    onCopy onCut onPaste

    2、键盘事件

    onKeyDown onKeyPress onKeyUp

    3、焦点事件

    onFocus onBlur

    • 这些焦点事件工作在 React DOM 中所有的元素上 ,不仅是表单元素。

    4、表单事件

    onChange onInput onSubmit

    • onChange事件经过React改良,内容改变时即可实时触发;而原生的需内容改变且失去焦点后触发才触发。

    5、鼠标事件

    onClick onContextMenu onDoubleClick 
    
    onDrag onDragEnd onDragEnter onDragExit
    
    onDragLeave onDragOver onDragStart onDrop
    
    onMouseDown onMouseEnter onMouseLeave
    
    onMouseMove onMouseOut onMouseOver onMouseUp 
    • onMouseEnter 和 onMouseLeave 事件从离开的元素传播到正在进入的元素,而不是普通的冒泡,并且没有捕获阶段;只有在鼠标指针穿过被选元素时,才会触发。
    • onMouseOut onMouseOver事件:不论鼠标指针穿过被选元素或其子元素,都会触发。

    6、选择事件

    onSelect

    7、触摸事件

    onTouchCancel onTouchEnd onTouchMove onTouchStart

    8、UI事件

    onScroll

    9、滚轮事件

    onWheel

    10、图像事件

    onLoad onError

    11、动画事件

    onAnimationStart onAnimationEnd onAnimationIteration

    12、其他事件

    onToggle

    在React中使用原生事件

    • 由于原生事件需要绑定在真实DOM上,所以一般是在 componentDidMount阶段/ref的函数执行阶段进行绑定操作,在componentWillUnmount 阶段进行解绑操作以避免内存泄漏。
    import React,{Component} from 'react';
    import ReactDOM from 'react-dom'
    
    class ReactEvent extends Component {
    
        componentDidMount() {
            //获取当前真实DOM元素
            const thisDOM = ReactDOM.findDOMNode(this);
            thisDOM.addEventListener('click',this.onDOMClick,false);
    
        }
    
        componentWillUnmount() {
            //卸载时解绑事件,防止内存泄漏
            const thisDOM = ReactDOM.findDOMNode(this);
            thisDOM.removeEventListener('click',this.removeDOMClick);
        }
    
        onDOMClick(e){
            console.log(e)
        }
    
        render(){
            return(
                <div>
                    单击原始事件触发
                </div>
            )
        }
    }
    export default ReactEvent

    合成事件和原生事件混合使用

    • 响应顺序
    import React,{Component} from 'react';
    import ReactDOM from 'react-dom'
    
    class ReactEvent extends Component {
        constructor(props){
            super(props)
            this.state = {
                value: ''
            }
            this.onReactClick = this.onReactClick.bind(this)
        }
        componentDidMount() {
            //获取当前真实DOM元素
            const thisDOM = ReactDOM.findDOMNode(this);
            thisDOM.addEventListener('click',this.onDOMClick,false);
    
        }
    
        componentWillUnmount() {
            //卸载时解绑事件,防止内存泄漏
            const thisDOM = ReactDOM.findDOMNode(this);
            thisDOM.removeEventListener('click',this.removeDOMClick);
        }
    
        onDOMClick(e){
            console.log("原生事件绑定事件触发")
        }
    
        onReactClick(e){
            console.log("React合成事件绑定事件触发")
        }
    
        render(){
            return(
                <div onClick={this.onReactClick}>
                    单击事件触发
                </div>
            )
        }
    }
    export default ReactEvent
    • 首先DOM事件监听器被执行,然后事件继续冒泡至document,合成事件监听器再被执行。
    • 即,最终控制台输出为:

    • 合成事件绑定事件触发

    • 原生事件绑定事件触发

    • 阻止冒泡
    1. 如果在onDOMClick中调用e.stopPropagtion()
        onDOMClick(e){
            e.stopPropagation()
            console.log("原生事件绑定事件触发")
        }
    • 由于DOM事件被阻止冒泡了,无法到达document,所以合成事件自然不会被触发,控制台输出就变成了:

      • 原生事件绑定事件触发
    • 再测试个复杂的例子
    import React,{Component} from 'react';
    import ReactDOM from 'react-dom'
    
    class ReactEvent extends Component {
        constructor(props){
            super(props)
            this.state = {
                value: ''
            }
            this.onReactClick = this.onReactClick.bind(this)
            this.onReactChildClick = this.onReactChildClick.bind(this)
        }
        componentDidMount() {
            //获取当前真实DOM元素
            const thisDOM = ReactDOM.findDOMNode(this);
            thisDOM.addEventListener('click',this.onDOMClick,false);
            //获取子元素并绑定事件
            const thisDOMChild = thisDOM.querySelector(".child");
            thisDOMChild.addEventListener('click',this.onDOMChildClick,false);
    
        }
    
        onDOMClick(e){
    
            console.log("父组件原生事件绑定事件触发")
        }
    
        onReactClick(e){
            console.log("父组件React合成事件绑定事件触发")
        }
    
        onDOMChildClick(e){
            e.stopPropagation()
            console.log("子元素原生事件绑定事件触发")
        }
    
        onReactChildClick(e){
    
            console.log("子元素React合成事件绑定事件触发")
        }
    
        render(){
            return(
                <div onClick={this.onReactClick}>                
                    父元素单击事件触发
                    <button className="child" onClick={this.onReactChildClick}>子元素单击事件触发</button>
                </div>
            )
        }
    }
    export default ReactEvent
    • 通过设置原生事件绑定为冒泡阶段调用,且每次测试单击子元素按钮:

      1. 在子元素原生事件程序中阻止事件传播,则打印出:

        • 子元素原生事件绑定事件触发;
      2. 在父元素元素事件程序中阻止事件传播,则打印出:

        • 子元素原生事件绑定事件触发
        • 父组件原生事件绑定事件触发
      3. 在子元素React合成事件onClick中阻止事件传播,则打印出:

        • 子元素原生事件绑定事件触发
        • 父组件原生事件绑定事件触发
        • 子元素React合成事件绑定事件触发
      4. 在父元素React合成事件onClick中阻止事件传播,则打印出:

        • 子元素原生事件绑定事件触发
        • 父组件原生事件绑定事件触发
        • 子元素React合成事件绑定事件触发
        • 父组件React合成事件绑定事件触发
    • 可以看到若不阻止事件传播每次(单击子元素)事件触发流程是:

    Document->子元素(原生事件触发)->父元素(原生事件)->回到Document->React子元素合成事件监听器触发 ->React父元素合成事件监听器触发

    其实,React合成事件封装的stopPropagtion函数在调用时给自己加了个isPropagationStopped的标记位来确定后续监听器是否执行。
    展开全文
  • react表单验证For almost every form that you create, you will want some sort of validation. In React, working with and validating forms can be a bit verbose, so in this article we are going to use a ...

    react表单验证

    For almost every form that you create, you will want some sort of validation. In React, working with and validating forms can be a bit verbose, so in this article we are going to use a package called Formik to help us out!

    对于您创建的几乎每种表单,您都需要某种验证。 在React中,使用和验证表单可能有些冗长,因此在本文中,我们将使用一个名为Formik的软件包来帮助我们!

    TLDR (TLDR)

    • Create a React project

      创建一个React项目
    • Add the Formik (and Yup) packages

      添加Formik(和Yup)程序包
    • Customize the Formik component with an onSubmit callback and a validate function for error messages

      使用onSubmit回调和错误消息的validate函数来自定义Formik组件
    • then display those error messages to the user.> View the final code on CodeSandbox!

      然后向用户显示这些错误消息。> 在CodeSandbox上查看最终代码

    Here's a sneak peak at what we are going to create.

    这是我们将要创建的产品的一个潜行高峰。

    创建React项目 ( Creating the React Project )

    For this demo, I'll be using CodeSandbox. You can use CodeSandbox as well or use your local environment. Totally up to you.

    对于此演示,我将使用CodeSandbox 。 您也可以使用CodeSandbox或使用您的本地环境。 完全取决于您。

    Regardless of what you use for this demo, you need to start with a new React app using Create React App. In CodeSandbox, I'm going to choose to do just that.

    无论您使用什么演示,都需要使用Create React App从一个新的React应用开始。 在CodeSandbox中,我将选择执行此操作。

    安装必要的软件包 ( Installing Necessary Packages )

    Now that we have our initial project created, we need to install three packages.

    现在我们已经创建了初始项目,我们需要安装三个软件包。

    • Formik - makes handling validation, error messages, and form submission easier

      Formik-使处理验证,错误消息和表单提交更加容易
    • Email-validator - tiny package to validate emails (I hope this one is self-explanatory : )

      电子邮件验证程序 -用于验证电子邮件的小程序包(我希望这是不言自明的:)
    • Yup - schema validator that is commonly used in conjuntion with Formik

      是的 -即常用连词使用Formik架构验证

    胶体 (Formik)

    In your terminal, you'll need to install Formik.

    在您的终端中,您需要安装Formik。

    npm install Formik

    I'll do the same in the CodeSandbox dependency GUI.

    我将在CodeSandbox依赖项GUI中进行相同的操作。

    电子邮件验证者 (Email-Validator)

    现在安装电子邮件验证程序。
    npm install email-validator

    Again installing from the CodeSandbox GUI.

    再次从CodeSandbox GUI安装。

    (Yup)

    npm install Yup

    And again in CodeSandbox.

    再次在CodeSandbox中。

    创建经过验证的表单组件 ( Creating the Validated Form Component )

    Now, we can start to stub out our ValidatedFormComponent. For now, we just want to create the basics and import it into the root file in the app to see it get displayed.

    现在,我们可以开始存根我们的ValidatedFormComponent。 现在,我们只想创建基础并将其导入应用程序的根文件中以查看其显示。

    • Create new functional component

      创建新的功能组件
    • Add dummy display content

      添加虚拟显示内容
    • Import in index.js

      导入index.js

    So, create a new file in your src **directory called ValidatedLoginForm.js. **Inside of that file, add the basic code for a functional component.

    因此,请在您的src目录中创建一个名为 ValidatedLoginForm的新文件 js。 **在该文件内,添加功能组件的基本代码。

    import React from "react" ;
    const ValidatedLoginForm = ( ) => (
      < div >
        < h1 > Validated Form Component < / h1 >
      < / div >
    ) ;
    
    export default ValidatedLoginForm ;

    Then, include it in your index.js file.

    然后,将其包括在索引中js文件

    function App ( ) {
      return (
        < div className = "App" >
          < ValidatedLoginForm / >
        < / div >
      ) ;
    }

    and you should see it displayed.

    并且您应该看到它显示。

    Now, let's start with the Formik stuff. First, import Formik, Email-Valiator, and Yup in your new component.

    现在,让我们从Formik的东西开始。 首先,在您的新组件中导入Formik,Email-Valiator和Yup。

    import { Formik } from "formik" ;
    import _ as EmailValidator from "email-validator" ;
    import _ as Yup from "yup" ;

    Now, let's stub out the Formik tag with initial values. Think of initial values as setting your state initially.

    现在,让我们将Formik标记存入初始值。 将初始值视为初始设置状态。

    You'll also need an onSubmit callback. This callback will take two parameters, *values *and an object that we can destructure. The values represented the input values from your form. I'm adding some dummy code here to simulate an async login call, then logging out what the values are.

    您还需要一个onSubmit回调。 该回调将带有两个参数* 值*和一个我们可以分解的对象。 这些值表示表单中的输入值。 我在此处添加一些虚拟代码来模拟异步登录调用,然后注销值。

    In the callback, I'm also calling the setSubmitting function that was destructured from the second parameters. This will allow us to enable/disable the submit button while the asynchronous login call is happening.

    在回调中,我还要调用从第二个参数解构的setSubmitting函数。 这将允许我们在异步登录调用发生时启用/禁用提交按钮。

    < Formik
      initialValues = { { email : "" , password : "" } }
      onSubmit = { ( values , { setSubmitting } ) => {
        setTimeout ( ( ) => {
          console . log ( "Logging in" , values ) ;
          setSubmitting ( false ) ;
        } , 500 ) ;
      } }
    >
      < h1 > Validated Login Form < / h1 >
    < / Formik >

    渲染道具 (Render Props)

    The Formik component uses render props to supply certain variables and functions to the form that we create. If you're not very familiar with render props, I would take a second to check out Render Props Explained.

    Formik组件使用渲染道具为我们创建的表单提供某些变量和函数。 如果您对渲染道具不是很熟悉,我将花一秒钟时间查看“ 渲染道具说明”。

    In short, render props are used to pass properties to children elements of a component. In this case, Formik will pass properties to our form code, which is the child. Notice that I'm using destructuring to get a reference to several specific variables and functions.

    简而言之,渲染道具用于将属性传递给组件的子元素。 在这种情况下,Formik会将属性传递给我们的子代码(即子代码)。 请注意,我正在使用解构来获取对几个特定变量和函数的引用。

    { props => {
          const {
            values ,
            touched ,
            errors ,
            isSubmitting ,
            handleChange ,
            handleBlur ,
            handleSubmit
          } = props ;
          return (
            < div >
              < h1 > Validated Login Form < / h1 >
            < / div >
          ) ;
        } }

    显示表格 ( Display the Form )

    Now, we can actually start to write the code to display the form. For what it's worth, in the finished CodeSandbox, I also created a LoginForm.*js *component to show how basic login forms are handled from scratch. You can also use that as a reference for the form we are going to add now.

    现在,我们实际上可以开始编写代码以显示表单了。 值得一提的是,在完成的CodeSandbox中 ,我还创建了一个LoginForm 。* js *组件,以演示如何从头开始处理基本的登录表单。 您也可以将其用作我们现在要添加的表单的参考。

    The form is pretty simple with two inputs (email and password), labels for each, and a submit button.

    表单非常简单,有两个输入(电子邮件和密码),每个输入的标签和一个提交按钮。

    { props => {
          const {
            values ,
            touched ,
            errors ,
            isSubmitting ,
            handleChange ,
            handleBlur ,
            handleSubmit
          } = props ;
          return (
            < form onSubmit = { handleSubmit } >
              < label htmlFor = "email" > Email < / label >
              < input name = "email" type = "text" placeholder = "Enter your email" / >
    
              < label htmlFor = "email" > Password < / label >
              < input
                name = "password"
                type = "password"
                placeholder = "Enter your password"
              / >
              < button type = "submit" >
                Login
              < / button >
            < / form >
          ) ;
        } }

    Notice that the *onSubmit *is calling the *handleSubmit *from the props.

    请注意,* onSubmit *正在从道具中调用* handleSubmit *

    I mentioned earleir that we could disable our submit button while the user is already attempting to login. We can add that small change now by using the *isSubmitting *property that we destructured from props above.

    我提到了earleir,我们可以在用户已经尝试登录时禁用提交按钮。 现在,我们可以使用从上面的props 分解而来的* isSubmitting *属性来添加少量更改。

    < button type = "submit" disabled = { isSubmitting } >
          Login
      < / button >

    I would recommend adding the CSS from the finished CodeSandbox as well. Otherwise you won't get the full effect. You can copy the below css into your styles.css file.

    我建议也从完成的CodeSandbox中添加CSS。 否则,您将无法获得全部效果。 您可以将以下CSS复制到您的样式中css文件。

    .App  {
      font-family : sans-serif ;
    }
    
    h1  {
      text-align : center ;
    }
    
    form  {
      max-width : 500 px ;
      width : 100% ;
      margin : 0 auto ;
    }
    
    label,
    input  {
      display : block ;
      width : 100% ;
    }
    
    label  {
      margin-bottom : 5 px ;
      height : 22 px ;
    }
    
    input  {
      margin-bottom : 20 px ;
      padding : 10 px ;
      border-radius : 3 px ;
      border : 1 px solid #777 ;
    }
    
    input .error  {
      border-color : red ;
    }
    
    .input-feedback  {
      color : rgb ( 235 , 54 , 54 ) ;
      margin-top : - 15 px ;
      font-size : 14 px ;
      margin-bottom : 20 px ;
    }
    
    button  {
      padding : 10 px 15 px ;
      background-color : rgb ( 70 , 153 , 179 ) ;
      color : white ;
      border : 1 px solid rgb ( 70 , 153 , 179 ) ;
      background-color : 250 ms ;
    }
    
    button :hover  {
      cursor : pointer ;
      background-color : white ;
      color : rgb ( 70 , 153 , 179 ) ;
    }

    添加验证消息逻辑 ( Adding Validation Messages Logic )

    Now we need to figure out how to validate our inputs. The first question is, what constraints do we want to have on our input. Let's start with email. Email input should...

    现在我们需要弄清楚如何验证我们的输入。 第一个问题是,我们希望对输入有什么限制。 让我们从电子邮件开始。 电子邮件输入应...

    • Be required

      需要
    • Look like a real email

      看起来像一封真实的电子邮件

    Password input should...

    密码输入应...

    • Be required

      需要
    • Be at least 8 characters long

      至少8个字符长
    • contain at least one number

      至少包含一个数字

    We'll cover two ways to create these messages, one using Yup and one doing it yourself. We recommend using Yup and you'll see why shortly.

    我们将介绍两种创建这些消息的方法,一种是使用Yup,另一种是自己创建。 我们建议您使用Yup,稍后您会看到原因。

    自己动手 (Doing it Yourself)

    The first option is creating our validate function. The purpose of the function is to iterate through the values of our form, validate these values in whatever way we see fit, and return an errors *object that has key value pairs of *value->message.

    第一种选择是创建我们的验证功能。 该函数的目的是遍历表单的值,以我们认为合适的方式验证这些值,并返回一个错误对象,该对象具有键值对* value- > message

    Inside of the Formik tag, you can add the following code. This will always add an "Invalid email" error for email. We will start with this and go from there.

    在Formik标记内,您可以添加以下代码。 这将始终为电子邮件添加“无效电子邮件”错误。 我们将从此开始,然后从那里开始。

    validate = { values => {
          let errors = { } ;
          errors . email = "Invalid email" ;
          return errors ;
        } }

    Now, we can ensure that the user has input something for the email.

    现在,我们可以确保用户已为电子邮件输入了内容。

    validate = { values => {
          let errors = { } ;
          if ( ! values . email ) {
            errors . email = "Required" ;
          } 
     return errors ;
    } }

    Then, we can check that the email is actually a valid looking email by using the email-validator package. This will look almost the same as the equivalent check for email.

    然后,我们可以使用email-validator包检查该电子邮件实际上是有效的电子邮件。 这看起来与电子邮件的等效支票几乎相同。

    validate = { values => {
          let errors = { } ;
          if ( ! values . email ) {
            errors . email = "Required" ;
          } else if ( ! EmailValidator . validate ( values . email ) ) {
            errors . email = "Invalid email address" ;
          }
          return errors ;
        } }

    That takes care of email, so now for password. We can first check that the user input something.

    这样就可以处理电子邮件,因此现在需要输入密码。 我们可以首先检查用户输入的内容。

    validate = { values => {
          let errors = { } ;
          if ( ! values . password ) {
            errors . password = "Required" ;
          } 
     return errors ;
    } }

    Now we need to check the length to be at least 8 characters.

    现在我们需要检查长度至少为8个字符。

    validate = { values => {
          const passwordRegex = /(?=.*[0-9])/ ;
          if ( ! values . password ) {
            errors . password = "Required" ;
          } else if ( values . password . length < 8 ) {
            errors . password = "Password must be 8 characters long." ;
          } 
    
          return errors ;
        } }

    And lastly, that the password contains at least one number. For this, we can use regex.

    最后,密码至少包含一个数字。 为此,我们可以使用正则表达式。

    validate = { values => {
          let errors = { } ;
    
          const passwordRegex = /(?=.*[0-9])/ ;
          if ( ! values . password ) {
            errors . password = "Required" ;
          } else if ( values . password . length < 8 ) {
            errors . password = "Password must be 8 characters long." ;
          } else if ( ! passwordRegex . test ( values . password ) ) {
            errors . password = "Invalida password. Must contain one number" ;
          }
    
          return errors ;
        } }

    Here's the whole thing.

    这就是全部。

    validate = { values => {
          let errors = { } ;
          if ( ! values . email ) {
            errors . email = "Required" ;
          } else if ( ! EmailValidator . validate ( values . email ) ) {
            errors . email = "Invalid email address" ;
          }
    
          const passwordRegex = /(?=.*[0-9])/ ;
          if ( ! values . password ) {
            errors . password = "Required" ;
          } else if ( values . password . length < 8 ) {
            errors . password = "Password must be 8 characters long." ;
          } else if ( ! passwordRegex . test ( values . password ) ) {
            errors . password = "Invalida password. Must contain one number" ;
          }
    
          return errors ;
        } }

    Ok, you might have noticed that handling the validate logic on our own gets a bit verbose. We have to manually do all of the checks ourselves. It wasn't that bad I guess, but with the Yup package, it gets all the more easy!

    好的,您可能已经注意到,独自处理验证逻辑有些冗长。 我们必须自己手动进行所有检查。 我猜并没有那么糟,但是有了Yup软件包,它变得更加容易!

    Yup is the recommended way to handle validation messages.

    建议使用Yup处理验证消息。

    Yup makes input validation a breeze!

    是的,输入验证变得轻而易举!

    When using Yup, we no longer will see the Validate *property, but insead use *validationSchema. Let's start with email. Here is the equivalent validation using Yup.

    使用Yup时,我们将不再看到Validate * 属性,而是使用* validateSchema 。 让我们从电子邮件开始。 这是使用Yup的等效验证。

    validationSchema = { Yup . object ( ) . shape ( {
          email : Yup . string ( )
            . email ( )
            . required ( "Required" )
        } ) }

    Much shorter right?! Now, for password.

    更短吧?! 现在,输入密码。

    validationSchema = { Yup . object ( ) . shape ( {
      email : Yup . string ( )
        . email ( )
        . required ( "Required" ) ,
      password : Yup . string ( )
        . required ( "No password provided." )
        . min ( 8 , "Password is too short - should be 8 chars minimum." )
        . matches ( /(?=.*[0-9])/ , "Password must contain a number." )
    } ) }

    Pretty SWEET!

    太甜了!

    显示验证/错误消息 ( Displaying Validation/Error Messages )

    Now that we have the logic for creating error messages, we need to display them. We will need to update the inputs in our form a bit.

    现在我们有了创建错误消息的逻辑,我们需要显示它们。 我们将需要稍微更新表单中的输入。

    We need to update several properties for both email and password inputs.

    我们需要更新电子邮件和密码输入的多个属性。

    • value

    • onChange

      onChange
    • onBlur

      onBlur
    • className

      班级名称

    电子邮件 (Email)

    Let's start by updating value, onChange, and onBlur. Each of these will use properties from the render props.

    让我们从更新value,onChange和onBlur开始。 这些中的每一个都将使用渲染道具的属性。

    < input
      name = "email"
      type = "text"
      placeholder = "Enter your email"
      value = { values . email }
      onChange = { handleChange }
      onBlur = { handleBlur }
    / >

    Then we can add a conditional "error" class if there are any errors. We can check for errors by looking at the errors object (remeber how we calculated that object ourselves way back when).

    然后,如果有任何错误,我们可以添加条件“错误”类。 我们可以通过查看错误对象来检查是否存在错误(请记住,我们如何计算该对象的返回时间)。

    We can also check the touched property, to see whether or not the user has interacted with the email input before showing an error message.

    我们还可以检查touched属性,以查看用户在显示错误消息之前是否已与电子邮件输入进行了交互。

    < input
      name = "email"
      type = "text"
      placeholder = "Enter your email"
      value = { values . email }
      onChange = { handleChange }
      onBlur = { handleBlur }
      className = { errors . email && touched . email && "error" }
    / >

    And lastly, if there are errors, we will display them to the user. All in all, email will look like this.

    最后,如果有错误,我们将向用户显示。 总而言之,电子邮件将如下所示。

    < label htmlFor = "email" > Email < / label >
    < input
      name = "email"
      type = "text"
      placeholder = "Enter your email"
      value = { values . email }
      onChange = { handleChange }
      onBlur = { handleBlur }
      className = { errors . email && touched . email && "error" }
    / >
    { errors . email && touched . email && (
      < div className = "input-feedback" > { errors . email } < / div >
    ) }

    密码 (Password)

    Now we need to do the same with password. I won't walk through each step beause they are exactly the same as email. Here's the final code.

    现在我们需要对密码进行相同的操作。 因为它们与电子邮件完全相同,所以我不会逐步进行。 这是最终代码。

    < label htmlFor = "email" > Password < / label >
    < input
      name = "password"
      type = "password"
      placeholder = "Enter your password"
      value = { values . password }
      onChange = { handleChange }
      onBlur = { handleBlur }
      className = { errors . password && touched . password && "error" }
    / >
    { errors . password && touched . password && (
      < div className = "input-feedback" > { errors . password } < / div >
    ) }

    测试一下 ( Test it Out )

    Let's try it out! You can start by clicking the button without entering anything. You should see validation messages.

    让我们尝试一下! 您可以单击按钮开始,而无需输入任何内容。 您应该看到验证消息。

    Now, we can get more specific for testing messages. Refresh your page to do this.Click inside of the email input, but don't type anything.

    现在,我们可以更具体地测试消息。 刷新页面以执行此操作。单击电子邮件输入的内部,但不要输入任何内容。

    Then, click away from the input. You should see the "Required" message pop up. Notice that this message doesn't pop up automatically when the page loads. We only want to display error messages after the user has interacted with the input.

    然后,单击远离输入。 您应该看到“必填”消息弹出。 请注意,页面加载时该消息不会自动弹出。 我们只想在用户与输入进行交互后显示错误消息。

    Now, start to type. You should get a message about not being a valid email.

    现在,开始输入。 您应该收到有关不是有效电子邮件的消息。

    And lastly, type in a valid looking email, and your error message goes away.

    最后,输入有效的电子邮件,您的错误消息就会消失。

    Now, same for password. Click on the input, then away, and you'll get the required message.

    现在,密码相同。 单击输入,然后离开,您将收到必需的消息。

    Then, start typing and you'll see the length validation.

    然后,开始输入,您将看到长度验证。

    Then, type 8 or more characters that does not include a number, and you'll see the "must contain a number" message.

    然后,键入8个或更多不包含数字的字符,您将看到“必须包含数字”消息。

    And lastly, add a number, and error messages go away.

    最后,添加一个数字,错误消息就会消失。

    结论 ( Conclusion )

    Whew, that was a long one! Again, validation can be a tricky thing, but with the help of a few packages, it becomes a bit easier. At the end of the day though, I think we've got a pretty legit login form!

    哇,那是很长的! 再次,验证可能是一件棘手的事情,但是在一些软件包的帮助下,它变得容易一些。 归根结底,我认为我们已经有了一个非常合法的登录表单!

    翻译自: https://scotch.io/tutorials/validating-a-login-form-with-react

    react表单验证

    展开全文
  • React事件处理 1.事件绑定 1.React事件绑定语法与DOM事件语法相似; 2.语法:on+事件名称=事件处理函数,比如onClick = function(){}; 3.React事件使用驼峰命名法; 4.类组件与函数组件绑定事件是差不多的,只是在类组件...

    React事件处理

    1.事件绑定

    1.React事件绑定语法与DOM事件语法相似;

    2.语法:on+事件名称=事件处理函数,比如onClick = function(){};

    3.React事件使用驼峰命名法;

    4.类组件与函数组件绑定事件是差不多的,只是在类组件中绑定事件函数的时候需要用到this,代表指向当前的类的引用,在函数中不需要调用this

    class App extends React.Component{
        // 事件处理函数
        handleClick() {
            console.log('点我就好了')
        }
        render() {
            return (
                <button onClick={this.handleClick}>点我了吗</button>
            )
        }
    }
    

    2.事件对象

    1.可以通过事件处理函数的参数获取到事件对象;

    2.React中的时间对象叫:合成事件;

    3.合成事件:兼容所有浏览器,无需担心夸浏览器兼容问题;

    4.除了兼容所有浏览器外,还拥有和浏览器原生事件相同的接口,包括stopPropagation()和 preventDefault()

    5.若想获取到原生事件对象,可以通过nativeEvent属性获取

    class App extends React.Component{
        // 事件对象
        handleClick(e){
            // 阻止默认行为
            e.preventDefault()
            console.log('a标签的单机事件触发了')
        }
        render() {
            return (
                <a href="http://www.baidu.com" onClick={this.handleClick}> baidu</a>
            ) 
        }
    }
    
    

    获取原生事件对象

    class App extends React.Component{
        // 事件处理函数
        handleClick(e) {
            console.log(e.nativeEvent)
        }
        render() {
            return (
                <button onClick={this.handleClick}>点我了吗</button>
            )
        }
    }
    

    3.支持的事件

    • Clipboard Events 剪切板事件

      • 事件名 :onCopy onCut onPaste
      • 属性 :DOMDataTransfer clipboardData
    • compositionEvent 复合事件

      • 事件名: onCompositionEnd onCompositionStart onCompositionUpdate
      • 属性: string data
    • Keyboard Events 键盘事件

      • 事件名:onKeyDown onKeyPress onKeyUp
      • 属性: 例如 number keyCode 太多就不一一列举
    • Focus Events 焦点事件 (这些焦点事件在 React DOM 上的所有元素都有效,不只是表单元素)

      • 事件名: onFocus onBlur
      • 属性: DOMEventTarget relatedTarget
    • Form Events 表单事件

      • 事件名: onChange onInput onInvalid onSubmit
    • Mouse Events 鼠标事件

      • 事件名:

        onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
        onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
        onMouseMove onMouseOut onMouseOver onMouseUp
        
    • Pointer Events 指针事件

      • 事件名:

        onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
        onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
        
    • Selection Events 选择事件

      • 事件名:onSelect
    • Touch Events 触摸事件

      • 事件名:onTouchCancel onTouchEnd onTouchMove onTouchStart
    • UI Events UI 事件

      • 事件名: onScroll
    • Wheel Events 滚轮事件

      • 事件名:onWheel

      • 属性:

        number deltaMode
        number deltaX
        number deltaY
        number deltaZ
        
    • Media Events 媒体事件

      • 事件名:

        onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
        onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
        onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
        onTimeUpdate onVolumeChange onWaiting
        
    • Image Events 图像事件

      • 事件名:onLoad onError
    • Animation Events 动画事件

      • 事件名:onAnimationStart onAnimationEnd onAnimationIteration
    • Transition Events 过渡事件

      • 事件名:onTransitionEnd
    • Other Events 其他事件

      • 事件名: onToggle
    展开全文
  • React事件大全

    2019-06-17 07:22:13
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • 2. 将外部错误传递给表单以始元素无效. 3. 动态的向表单添加元素,他们将注册或取消注册到表单. 4. 构建任何类型的表单元素组件,不只是传统输入,而是你自己想要的东西,并获得验证. 5. 使用处理程序处理表单的不同...
  • React-事件处理详解

    2016-03-21 10:14:33
    React通过将事件处理器绑定到组建上处理事件事件触发的同时更新组建的内部状态,内部状态更新会触发组件的重绘。因此,如果视图层想要渲染出事件出发后的结果,它所要做的就是渲染函数中读取组件的内部状态。 一...
  • React Event 事件系统

    2018-09-22 10:51:13
    React事件 React 标准化了事件对象,因此在不同的浏览器中都会有相同的属性。 组件createClass后创建的是许多方法组成的对象。组件中使用的方法分为React自有的方法与用户定义的方法。其中React自有方法是组件...
  • 最近在学习React,做了一个简单的Demo,写成博客,用以自勉。Demo功能:在输入框中输入数据后,点击保存按钮,数据将会逐一显示在输入框下方,点击保存后显示的任何一条数据,该数据即可被删除。
  • 对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms。 处理方法: (1)html书写 form标签中去掉action参数,定义onSubmit...
  • 在本教程中,您将学习React中的表单事件。 我们将从创建一个简单的基于React的应用程序开始,然后添加一个表单和一些元素。 然后,我们将看到如何向表单元素添加事件。 如果您是React的初学者,我建议您阅读...
  • React Native封装Form表单组件 为什么我们在移动端开发中急需要一个完善的Form表单组件尼?做过移动端开发的小伙伴们应该都清楚,一个完整的App项目中避免不了要有登录注册功能,用户信息,密码等一系列需要新用户...
  • AutoComplete,ant design form表单
  • 5、React组件事件详解

    2019-03-29 07:46:22
    React组件事件响应 React在构建虚拟DOM的同时,还构建了自己的事件系统;且所有事件对象和W3C规范保持一致。 React事件系统和浏览器事件系统相比,主要增加了两个特性:事件代理、和事件自动绑定。 1、事件代理 ...
  • react+ant 自定义表单

    2020-06-01 18:20:19
    import React, { useState, useEffect } from "react"; import { Row, Col, Input, Select, DatePicker, Button, Tooltip } from "antd"; import { Const } from "src/utils/const"; const { Option } = Select...
  • 一个非常轻巧的 Form 实现, gzip 体积只有 3kb, 可以很方便跨越组件层级获取表单对象, 或者管理联动更新 安装 $ yarn add react-den-form 复制代码基础使用 Form 组件会在有 field 属性的子组件上注入 onChange ...
  • React并不提供数据双向绑定功能。以为例,我们可以通过setState命令改变input绑定的数据,从而改变input的值,但是用户填写input表单并不能改变input绑定的数据。 但是其实在Vue中,input等表单元素的双向数据绑定...
  • React表单组建

    2016-05-06 14:52:17
    表单组件Edit on GitHub ...关于 事件详情请查看 表单事件。 交互属性 表单组件支持几个受用户交互影响的属性: value,用于 、 组件。checked,用于类型为 checkbox 或者 radio 的 组
  • 在满足条件的时候,通过下列方法做不同的事 ①数据回显(设置值) this.refs.addForm.setFieldsValue({name: ‘json’}) // 给一个对象,属性名为表单中的某一项 ②清空数据 this.refs.addFrom.resetFields() ③获取...
  • React的数据、事件

    2019-09-18 09:02:14
    React的数据、事件 组件的数据挂载方式 React中数据分为两个部分 属性 状态(可以频繁变化) Vue中数据只有状态这一种类型 属性(props) props是正常从外部传入的,组件内部也可以通过一些方式来初始化的设置...
1 2 3 4 5 ... 20
收藏数 4,376
精华内容 1,750
关键字:

on方法 react 表单事件