React中的事件处理，受控组件，高阶函数和函数柯里化

最新推荐文章于 2024-04-07 15:03:05 发布

空谷丶幽兰

最新推荐文章于 2024-04-07 15:03:05 发布

阅读量207

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/118021294

版权

React 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.事件处理

1.React官网说我们要尽量不要过度使用ref
2.自身的事件，自身改变可以使用事件处理
3.通过onXxx属性执行事件处理函数(注意大小写)
		a.React使用的是自定义(合成)事件，而不是使用的原生DOM事件
		b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)——为了高效
4.通过event.target得到发生事件的DOM元素对象——不要过度使用ref

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 
    ref不要滥用，
 -->


    <!-- 创建一个容器 -->
    <div id="test"></div>

    <!-- 引入react 核心库 -->
    <script src="./js/react.development.js"></script>
    <!-- 引入react-dom用于react操作虚拟dom -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel用于将jsx转为js -->
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
    // 2.创建类式组件
        class Demo extends React.Component{
            // 创建ref容器
            myRef = React.createRef();
            myRef2 = React.createRef();

            // 展示左侧输入框数据
            showData = ()=>{
                alert(this.myRef.current.value);
            }
            // 展示右侧输入框的数据
            showData2 = (event)=>{
                // console.log(event.target.value);
                alert(event.target.value);
            }
            render(){
                return(
                    <div>
                        <input  ref={this.myRef} type="text" placeholder="点击触发" />
                        <button onClick={this.showData}>点击</button>
                        <input  onBlur={this.showData2}  type="text" placeholder="鼠标离开时触发" />
                    </div>
                )
            }
        }
        // 渲染到组件
        ReactDOM.render(<Demo/>,document.getElementById('test'));
    </script>
</body>
</html>

2.非受控组件：

	1.非受控组件，现用现取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
    //创建组件
    class Login extends React.Component{
        handleSubmit = (event)=>{
            event.preventDefault();  //阻止表单提交
            console.log(this);
            const {username,password} = this;
            alert(`你输入的用户名${username.value},你输入的密码${password.value}`);
        }
        render(){
            return(
                <form  onSubmit={this.handleSubmit}>
                    用户名：<input type="text" ref={c=>this.username=c} name="username"  />
                    密码：<input type="password"  ref={c=>this.password=c} name="password" />
                    <button>登录</button>
                </form>
            )
        }
    }

    // 渲染组件
    ReactDOM.render(<Login/>,document.getElementById('test'));
    </script>
</body>
</html>

3.受控组件

1.页面中的输入类dom，把输入维护到状态中，需要用时从状态中取出，这就是受控组件，相当于vue中的双向绑定
2.建议使用受控组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>受控组件</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
    //创建组件
    class Login extends React.Component{

        // 初始化状态
        state = {
            username:'',  //用户名
            password:''  //密码
        }

        // 保存用户名到状态中
        saveUsername=(event)=>{
            console.log(event.target.value);
            this.setState({username:event.target.value});
        }

        // 保存密码到状态中
        savaPassword= () =>{
            console.log(event.target.value);
            this.setState({password:event.target.value});
        }

        // 表单提交的回调
        handleSubmit = (event)=>{
            event.preventDefault();  //阻止表单提交
            const {username,password} = this.state;
            alert(`你输入的用户名${username},你输入的密码${password}`);
        }
        render(){
            return(
                <form  onSubmit={this.handleSubmit}>
                    用户名：<input type="text" onChange={this.saveUsername} name="username"  />
                    密码：<input type="password"  onChange={this.savaPassword} name="password" />
                    <button>登录</button>
                </form>
            )
        }
    }

    // 渲染组件
    ReactDOM.render(<Login/>,document.getElementById('test'));
    </script>
</body>
</html>

4.高阶函数

1.如果一个函数符合下面2个规范中的任何一个，那么该函数就称之为高阶函数
		a.若A函数，接收的参数是一个函数，那么A函数就称为高阶函数
		b.若A函数，调用的返回值依然是一个函数，那么A函数就可以称为高阶函数

2.常见的高阶函数有Promise,setTimeout,arr.map()，等

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 声明一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心模块 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom模块 -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel将jsx转为js代码 -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        //创建组件
    class Login extends React.Component{

        // 初始化状态
        state = {
            username:'',  //用户名
            password:''  //密码
        }

        // 保存表单数据到状态中
        saveFormData=(dataType)=>{
            return (event)=>{
                this.setState({[dataType]:event.target.value});
            }
        }

        // 表单提交的回调
        handleSubmit = (event)=>{
            event.preventDefault();  //阻止表单提交
            const {username,password} = this.state;
            alert(`你输入的用户名${username},你输入的密码${password}`);
        }
        render(){
            return(
                <form  onSubmit={this.handleSubmit}>
                    用户名：<input type="text" onChange={this.saveFormData('username')} name="username"  />
                    密码：<input type="password"  onChange={this.saveFormData('password')} name="password" />
                    <button>登录</button>
                </form>
            )
        }
        }

        // 渲染组件
        ReactDOM.render(<Login/>,document.getElementById('test'));
            </script>
</body>

</html>

5.函数柯里化

1.通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数柯里化</title>
</head>
<body>
    <!-- 创建一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script src="../js/17.0.1/react.development.js"></script>
    <!-- 引入react-dom用于操作虚拟dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        // 创建组件

        class Login extends React.Component{

            state = {
                username:'',
                password:''
            }
           saveFormData = (dataType)=>{
            return (event)=>{
                this.setState({[dataType]:event.target.value});
            }
           }
            handleSubmit=()=>{
                event.preventDefault(); //阻止默认行为
                const {username,password} = this.state;
                alert( `用户名是${username},密码是${password};`);
            }
            render(){
                return(
                  <form onSubmit={this.handleSubmit}>
                    用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>
                    密码： <input onChange={this.saveFormData('password')} type="password"  name="password"/>
                    <button>登录</button>
                  </form>
                )
            }
        }
        // 渲染组件
        ReactDOM.render(<Login />,document.getElementById('test'));
    </script>
</body>
</html>