React方向：元素添加事件以及react组件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React方向：元素添加事件以及react组件相关的知识，希望对你有一定的参考价值。
参考技术A方法一：外部定义函数
方法二：使用箭头函数添加
react中的组件在概念上来说是类似于javascript函数（即"props"）,并返回用于页面展示的内容React元素
所谓的无状态组件，是指的其定义的值，无法被react监听到。
此处ele只是一个普通的变量，是没有状态的，区分组件的一个标准就是判断组件是否有状态的加入，状态即是数据，在Vue中状态管理器Vuex即被称为状态管理器，实际上就是对数据的一个存储器，React中的状态也等同于数据的操纵，让数据驱动视图的响应。
在react中定义组件最简单的方式就是去使用js的函数。
当react为用户自定义组件时，它会将JSX所接收的属性以及子组件(children)转换为单个对象传递给组件，这个对象就被称之为“props”
基于类并且继承父类React组件，子类就能使用react所提供的特性。
construct中使用super()调用父类构造函数来初始化子类实例，super之前只是不能使用this，因为当前实例的父类构造函数没有执行，不具有父类的能力。
React之事件处理之受控组件和非受控组件以及函数柯里化
文章目录
事件处理
（1）通过onxxx属性指定事件处理函数（注意大小写）
a. React使用的是自定义事件，而不是使用原生的DOM事件，为了更好地兼容性
b. React中的事件是通过事件委托方式处理的（委托给组件最外层的元素），为了高效
（2）通过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>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
//创建组件
class Login extends React.Component
handleSubmit = (event) =>
event.preventDefault(); //阻止表单提交
const username, password = this
alert(`你输入的用户名是：$username.value, 你输入的密码是：$password.value`)
render()
return (
<form onSubmit=this.handleSubmit>
用户名<input ref=c => this.username = c type="text" name="username"/>
密码<input ref=c => this.password = c type="password" name="password"/>
<button>登录</button>
</form>
)
ReactDOM.render(<Login/>, document.getElementById("test"))
</script>
</body>
</html>
运行结果：
受控组件
能够记录输入的信息。
<!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>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
//创建组件
class Login extends React.Component
state = //初始化state
username:"",
password:""
//保存用户名到状态中
saveUsername = (event) =>
// console.log(event.target.value)
this.setState(username:event.target.value)
//保存密码到状态中
savePassword = (event) =>
// 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 onChange=this.saveUsername type="text" name="username"/>
密码<input onChange=this.savePassword type="password" name="password"/>
<button>登录</button>
</form>
)
ReactDOM.render(<Login/>, document.getElementById("test"))
</script>
</body>
</html>
函数柯里化
高阶函数：若函数接受的参数是一个函数或者返回的值为一个函数则此函数称为高阶函数。
函数柯里化：通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码形式
简单来说就是把函数给一般化来使用，更加简单
<!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>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
//创建组件
class Login extends React.Component
state = //初始化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 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>
不用函数柯里化
当然也可以不用函数柯里化来简洁代码
<!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>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
//创建组件
class Login extends React.Component
state = //初始化state
username:"",
password:""
saveFormData = (dataType, 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 onChange=(event)=>this.saveFormData("username", event) type="text" name="username"/>
密码<input onChange=(event)=>this.saveFormData("password", event) type="password" name="password"/>
<button>登录</button>
</form>
)
ReactDOM.render(<Login/>, document.getElementById("test"))
</script>
</body>
</html>
以上是关于React方向：元素添加事件以及react组件的主要内容，如果未能解决你的问题，请参考以下文章
在 React 功能组件中使用 ref 添加测试鼠标事件监听器