一、事件处理

1、事件处理

React 元素的事件处理和 DOM 元素的相似，但是有一点语法上的不同，我们来看一个简单的例子

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 (            Print This        );    }}

（2）在事件处理函数中使用 public class fields 语法

class PrintThis extends React.Component {    constructor(props) {        super(props)    }    // 在事件处理函数中使用 `public class fields 语法`    handleClick = () => {        console.log(this)    }    render() {        return (            Print This        );    }}

（3）在回调函数中使用 箭头函数

class PrintThis extends React.Component {    constructor(props) {        super(props)    }    handleClick = () => {        console.log(this)    }    render() {        return (            
    
                     {/*在回调函数中使用 `箭头函数`*/}                
      this.handleClick(e) }>Print This            
    
        );    }}

3、传递参数

有的时候，我们还需要给事件传递额外的参数

class SayHello extends React.Component {    // 事件处理函数接收的参数必须在合成事件 `e` 之前    sayHelloTo(somebody, e) {        alert('Hello ' + somebody);    }    render() {        return (            
    
                     {/* 既可以使用 箭头函数 */}                
      this.sayHelloTo('Alice', e) }>Say Hello To Alice                {/* 也可以使用 Function.prototype.bind */}                
     Say Hello To Bob            
    
        );    }}

二、表单元素

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 属性为提交事件指定处理函数            
    
                     {/* type 属性指定 input 元素的类型 */}                {/* name 属性指定每个 input 元素的唯一标识符 */}                {/* value 属性指向 state 数据，使得 state 成为唯一的数据源 */}                {/* onChange 属性为 value 改变指定处理函数 */}                您的姓名：
     
     
     
                您的手机：
     
     
     
                
                 
    
        )    }}

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 属性为提交事件指定处理函数            
    
                     {/* type 属性指定 input 元素的类型 */}                {/* ref 属性用于从 DOM 节点获取表单元素的值 */}                您的姓名：
     
     
     
                您的手机：
     
     
     
                
                 
    
        )    }}

【 阅读更多 React 系列文章，请看 】