10 事件处理
事件的 this
注意, 事件触发的 this, 默认指向的 undefined;
所以请手动绑定 this 给事件相应函数比如:
this.clickCount = this.clickCount.bind(this)
onChange 事件
输入框获取修改后的值, 通过 onChange 事件
假如事件的参数是 e, 那么 e.target 获取到当前 DOM(即这个 <input> 标签), 然后 e.target.value 获取输入框的值
但这个时候修改是无效的, 因此必须通过 this.setState() 来修改值
onClick 事件
绑定点击事件, 通过 onClick 事件
参数同上, 一个道理, 但这里不需要
其他事件
略, 事件名和原理是一样的
- class HelloWord extends React.Component {
- constructor(props) {
- super(props);
- // 通过 state 设置组件变量
- this.state = {
- count: 0,
- bindValue: ''
- }
- // 在这里手动绑定 this, 原因是不绑定的话, this 将指向 undefined
- this.clickCount = this.clickCount.bind(this)
- this.changeValue = this.changeValue.bind(this)
- }
- // 渲染函数, this 指向实例本身
- render() {
- return <p>
- {/* onClick 注意是驼峰写法 */}
- <button onClick={this.clickCount}>点击我增加一次点击计数</button>
- <p > 你已经点击了 {this.state.count} 次</p>
这个输入框的值和上面的点击次数绑定了, 因此无法被手动修改 < input type="text" value={this.state.count}/>
- {/* 下面这个 br 标签, 必须是闭合标签写法, 否则会报错 */}
- <br/>
- <input type="text" value={this.state.bindValue} placeholder='请在这里输入值' onChange={this.changeValue}/>
- <br/>
上面输入框的值是:{this.state.bindValue}
- </p>
- }
- clickCount() {
- this.setState({
- count: this.state.count + 1
- })
- }
- changeValue(e) {
- // e.target 拿到 输入框这个 DOM, 然后 value 属性拿到修改后的值
- var newValue = e.target.value
- console.log(newValue)
- // 需要通过 setState 来修改值才能生效
- this.setState({
- bindValue: newValue
- })
- }
- }
阻止默认事件:
阻止默认事件, 需要通过 e.preventDefaul() 来实现(e 是事件的回调函数的参数)
React 事件函数的特点:
事件参数是一个合成事件 React 根据 W3C spec 来定义这些合成事件, 所以你不需要担心跨浏览器的兼容性问题;
在 render 里, 写成 this.xx, 但是这个事件执行时的 this 是 undefined, 所以需要手动绑定(bind);
事件的传参:
原则上, 就是返回一个带参数的函数;
方法一
返回通过 bind 绑定了 this 和 参数的函数;
需要注意的是, 事件参数无需添加, 会被默认后置到最后一个参数的位置:
- class HelloWord extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- count: 0
- }
- }
- // 渲染函数, this 指向实例本身
- render() {
- return <p>
- {/* 这种方法省略了 this 绑定的过程 */}
- <button onClick={this.clickCount.bind(this, 5)}>增加 count</button>
- <br/>
计数器二:{this.state.count}
- </p>
- }
- clickCount(number, e) {
- // 先是自定义参数, 最后一个是事件参数
- console.log(arguments)
- this.setState({
- count: this.state.count + number
- })
- }
- }
方法二
参数是一个函数, 这个函数里执行了你准备执行的那个函数
核心思想是: 参数函数被执行 > 参数函数里执行了原本预期执行的函数 > 预期执行的函数里, 放置了需要的参数
如代码:
- class HelloWord extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- count: 0
- }
- }
- // 渲染函数, this 指向实例本身
- render() {
- return <p>
- {/* 这种方法省略了 this 绑定的过程 */}
- <button onClick={e => this.clickCount.call(this, 5, e)}>增加 count</button>
- <br/>
计数器二:{this.state.count}
- </p>
- }
- clickCount(number, e) {
- // 先是自定义参数, 最后一个是事件参数
- console.log(arguments)
- this.setState({
- count: this.state.count + number
- })
- }
- }
来源: https://www.2cto.com/kf/201802/721136.html