React（5）

绑定函数事件

在以类继承的方式定义的组件中，为了能方便地调用当前组件的其他成员方法或属性（如：this.state），通常需要将事件处理函数运行时的 this 指向当前组件实例。

run(){
alert('我是一个run方法')
}

//方法不需要加(),加了(),一旦页面加载进来就执行了

绑定事件处理函数this的几种方法：

方法1：

1run(){
2     alert(this.state.name)
3}
4<button onClick={this.run.bind(this)}>按钮</button>  //不绑定this的话，上面的方法里面的this就指向不了，拿不到数据

方法2：

1constructor(props){
2        super(props);   //固定写法
3        this.state={
4            name:'我是一个home组件' 
5        }   
6        //构造函数中改变
7        this.run = this.run.bind(this);
8  }
9
10run(){
11        alert(this.state.name)
12}
13<button onClick={this.run}>按钮</button>

方法3：

1//直接使用箭头函数 run=()=> {
2        alert(this.state.name)
3 }
4
5<button onClick={this.run}>按钮</button>

**函数方法里传值，**改变state的值

1setName=(str)=>{
2      //改变state的值
3      this.setState({
4          username:str
5      })
6}
7
8<button onClick={this.setName.bind(this,'张三')}>执行方法传值</button>
9
10<button onClick={this.setName.bind(this,'张三','李四')}>执行方法传值</button>

获取dom节点方法

方法1：

1run=(event)=> {
2        //alert(event.target)  //获取执行事件的dom节点        //alert(event.target.getAttribute('aid'))  //获取dom的属性        event.target.style.background='red';
3 }
4
5<button aid="123" onClick={this.run}>按钮</button>

方法2：

1import React from 'react';
2
3class List extends React.Component {
4    constructor(props) {
5        super(props);
6        this.state = { 
7            username:''
8         };
9    }
10    inputChange=()=>{
11        /*
12            获取dom节点
13                1、给元素定义ref属性
14                    <input ref="username" />
15                2、通过this.refs.username 获取dom节点
16        
17        */
18        let val=this.refs.username.value;
19        this.setState({
20            username:val
21        })
22    }
23    getInput=()=>{
24        alert(this.state.username);
25    }
26    //键盘事件
27    inputKeyUp=(e)=>{
28        console.log(e.keyCode);
29        if(e.keyCode==13){
30            alert(e.target.value);
31        }
32    }
33    inputonKeyDown=(e)=>{
34        console.log(e.keyCode);
35        if(e.keyCode==13){
36            alert(e.target.value);
37        }
38    }
39    render() {
40        return (
41            <div>  
42                  {/* 获取表单的值
43
44                1、监听表单的改变事件                        onChange
45                2、在改变的事件里面获取表单输入的值            ref获取 
46                3、把表单输入的值赋值给username              this.setState({})
47                4、点击按钮的时候获取 state里面的username     this.state.username
48                 */}
49                <input ref="username" onChange={this.inputChange}/> <button onClick={this.getInput}>获取input的值</button>
50                <br /><br /> <hr />  
51                <h2>键盘事件</h2>
52                <input onKeyUp={this.inputKeyUp}/>
53                <br /><br />
54                <input onKeyDown={this.inputonKeyDown}/>
55            </div>
56        );
57    }
58}
59
60export default List;

评论区

相关推荐