React官方文档学习记录(三)- 处理事件

一点点记录,建议需要学习React的移步官方文档去学习。

虽然在React元素中处理事件和在DOM元素中处理事件是相同的,但是还是有一些语法上的问题需要注意:

  1. React事件使用驼峰命名(camelCase),而不是小写
  2. 使用函数作为事件处理器,而不是一个字符串
    1
    2
    3
    4
    5
    6
    7
    8
    <!--For example, the HTML:-->
    <button onclick="activateLasers()">
    Activate Lasers
    </button>
    <!--is slightly different in React:-->
    <button onClick={activateLasers}>
    Activate Lasers
    </button>

另一个区别在于你不能直接返回false来在React中组织默认行为。你应该明确地调用preventDefault。就像这样:

1
2
3
4
5
6
7
8
9
10
11
12
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log("The link was clicked");
}
return(
<a href="#" onClick={handleClick}>
Click me
</a>
);
}

并且你不需要调用addEventListener来对DOM元素添加监听器。反而,你只需要在元素初始渲染的时候提供一个监听器(listener)即可。

这里有个例子:(这里我没看得太懂,感觉this真的太多了。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);

对于JSX回调中的this需要特别的小心,因为在JavaScript中,类方法(class method)不会默认绑定,如果你忘记绑定this.handleClick并且传递(pass)给onClick的话,当这个函数被调用的时候,this就会是undefined

请看这篇关于函数如何在JavaScript中运行的文章。

如果你觉得这个bind非常困扰你,你还有两种方法来解决这问题。

  1. public class fields syntax(这个我是真的不懂)
    这里有几篇文章:
  • transform-class-properties
  • babel帮我们做了啥
  • class的继承
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    class LoggingButton extends React.Component {
    // This syntax ensures `this` is bound within handleClick.
    // Warning: this is *experimental* syntax.
    handleClick = () => {
    console.log('this is:', this);
    }
    render() {
    return (
    <button onClick={this.handleClick}>
    Click me
    </button>
    );
    }
    }
  1. 如果你不会用类作用域(class fields)语法,你可以在回调函数中使用箭头函数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    class LoggingButton extends React.Component {
    handleClick() {
    console.log('this is:', this);
    }
    render() {
    // This syntax ensures `this` is bound within handleClick
    return (
    <button onClick={(e) => this.handleClick(e)}> //注意这里每次调用的时候都是一个新的回调函数
    Click me
    </button>
    );
    }
    }

向事件处理器中传递参数

这里讲的是如何传递参数

1
2
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

在这两个例子中e这个参数代表的都是React事件(event)将会作为在ID后的第二个参数被传递进去。在一个箭头函数中,我们必须把这个传递过程指明。但是在bind中其他后面的参数会自动放到前面去(forwarded)。

dddd