一、事件处理
1、事件处理
React 元素的事件处理和 DOM 元素的相似，但是有一点语法上的不同，我们来看一个简单的例子
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
// 为事件处理函数绑定组件实例
// 绑定组件实例目的是为了能在事件处理函数中使用 this
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
// 这里传入的 `e` 是一个合成事件
// 拥有与浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()
this.setState((state) => ({
counter: state.counter + 1
}));
}
render() {
return (
<div>
<p>{ this.state.counter }</p><br/>
{/*事件命名采用小驼峰式，而不是纯小写*/}
{/*传入一个函数作为事件处理函数，而不是一个字符串*/}
<button onClick={ this.handleClick }>加 1</button>
</div>
);
}
}
ReactDOM.render(
<Counter />,
document.getElementById('app')
);
</script>
</body>
</html>
2、this 绑定
在上面的例子中，我们在 constructor() 中为事件处理函数绑定 this
请注意，在 JavaScript 中，class 的方法默认是不会绑定 this 的，也就是说
假如我们没有绑定 this.handleClick 并将其传入 onClick，那么当调用这个函数时，this 的值将为 undefined
如果希望在事件处理函数中使用 this，那么为事件处理函数绑定 this 是必须的，方法有三种：
（1）在构造函数中使用 bind
class PrintThis extends React.Component {
// 在构造函数中使用 `bind`
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this)
}
render() {
return (
<button onClick={ this.handleClick }>Print This</button>
);
}
}
（2）在事件处理函数中使用 public class fields 语法
class PrintThis extends React.Component {
constructor(props) {
super(props)
}
// 在事件处理函数中使用 `public class fields 语法`
handleClick = () => {
console.log(this)
}
render() {
return (
<button onClick={ this.handleClick }>Print This</button>
);
}
}
（3）在回调函数中使用 箭头函数
class PrintThis extends React.Component {
constructor(props) {
super(props)
}
handleClick = () => {
console.log(this)
}
render() {
return (
<div>
{/*在回调函数中使用 `箭头函数`*/}
<button onClick={ (e) => this.handleClick(e) }>Print This</button>
</div>
);
}
}
3、传递参数
有的时候，我们还需要给事件传递额外的参数
class SayHello extends React.Component {
// 事件处理函数接收的参数必须在合成事件 `e` 之前
sayHelloTo(somebody, e) {
alert('Hello ' + somebody);
}
render() {
return (
<div>
{/* 既可以使用 箭头函数 */}
<button onClick={ (e) => this.sayHelloTo('Alice', e) }>Say Hello To Alice</button>
{/* 也可以使用 Function.prototype.bind */}
<button onClick={ this.sayHelloTo.bind(this, 'Bob') }>Say Hello To Bob</button>
</div>
);
}
}
二、表单元素
1、受控组件
在 HTML 中，表单元素通常自己维护状态，并且根据用户输入事件进行更新
但是在 React 中，可变状态通常保存在组件的 state 属性中，并且只能通过 setState() 方法进行更新
如果我们希望组件的 state 还是唯一数据源，同时还控制着用户输入事件，这样的组件我们称之为 受控组件
class InfoForm extends React.Component {
constructor(props) {
super(props)
this.state = { name: '', phone: '' } // 提供默认值
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
// 为用户事件（state 发生改变）定义处理函数
handleChange(event) {
// console.log(event.target)
const target = event.target
// 如果需要处理多个 input 元素，那么可以根据 `target.name` 执行不同的操作
if (target.name === 'userName') {
this.setState({ name: target.value })
} else { // target.name === 'userPhone'
this.setState({ phone: target.value })
}
}
handleSubmit(event) {
alert('您的名字是 ' + this.state.name + '；' + '您的手机是 ' + this.state.phone)
event.preventDefault()
}
render() {
return (
// onSubmit 属性为提交事件指定处理函数
<form onSubmit={ this.handleSubmit }>
{/* type 属性指定 input 元素的类型 */}
{/* name 属性指定每个 input 元素的唯一标识符 */}
{/* value 属性指向 state 数据，使得 state 成为唯一的数据源 */}
{/* onChange 属性为 value 改变指定处理函数 */}
您的姓名：<input type="text" name="userName" value={ this.state.name } onChange={ this.handleChange } /><br /><br />
您的手机：<input type="text" name="userPhone" value={ this.state.phone } onChange={ this.handleChange } /><br /><br />
<input type="submit" value="提交" />
</form>
)
}
}
2、非受控组件
除了通过受控组件让 React 组件管理表单数据，还能使用非受控组件让 DOM 节点处理表单数据
编写非受控组件，我们无需为每个状态更新都写一个处理函数，只需使用 ref 从 DOM 节点中获取表单数据
class InfoForm extends React.Component {
constructor(props) {
super(props)
this.handleSubmit = this.handleSubmit.bind(this)
// 使用 `React.createRef()` 创建 ref
this.nameInput = React.createRef()
this.phoneInput = React.createRef()
}
handleSubmit(event) {
alert('您的名字是 ' + this.nameInput.current.value + '；' + '您的手机是 ' + this.phoneInput.current.value)
event.preventDefault()
}
render() {
return (
// onSubmit 属性为提交事件指定处理函数
<form onSubmit={ this.handleSubmit }>
{/* type 属性指定 input 元素的类型 */}
{/* ref 属性用于从 DOM 节点获取表单元素的值 */}
您的姓名：<input type="text" ref={ this.nameInput } /><br /><br />
您的手机：<input type="text" ref={ this.phoneInput } /><br /><br />
<input type="submit" value="提交" />
</form>
)
}
}
【 阅读更多 React 系列文章，请看 React学习笔记 】