【React系列教程三】定义方法、表单事件、双向数据绑定、键盘事件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33237207/article/details/89244355

一、定义和调用方法：

在Home组件内定义run方法，在render中通过{this.run}来调用。

import React from 'react';

class Home extends React.Component{
    constructor(props){
        super(props);
        this.state={
            msg:"我是home的组件",
        }
    }
    run(){
        alert('我是一个run方法');
    }
    getMsg(){
        alert(this.state.msg);
    }
    render(){
        return (
            <div>
                <button onClick={this.run}>点击按钮</button>
                <button onClick={this.run.bind(this)}>点击按钮</button>
            </div>
        )
    }
}

export default Home;

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

import React from 'react';

class Home extends React.Component{
    constructor(props){
        super(props);
        this.state={
            msg:"我是home的组件",
            title:'我是title',
        }
        // 改变this指向的方法2
        this.getMsg2=this.getMsg2.bind(this);
    }
    getMsg(){
        alert(this.state.msg);
    }
    getMsg2(){
        alert(this.state.msg);
    }
    getMsg3=()=>{
        alert(this.state.msg);
    }
    setMsg=()=>{
        this.setState({
            msg:"我是home的组件---改变了"
        })
    }
    setTitle=(str)=>{
        this.setState({
            title:str
        })
    }
   
    render(){
        return (
            <div>
                <button onClick={this.getMsg.bind(this)}>获取数据---改变this指向的方法1：用bind(this)</button>
                <br/>
                <button onClick={this.getMsg2}>获取数据---改变this指向的方法2：在构造方法中用bind(this)</button>
                <br/>
                <button onClick={this.getMsg3}>获取数据---改变this指向的方法3：用箭头函数方式</button>
                <br/>
                <button onClick={this.setMsg}>改变数据</button>
                <br/>
                <button onClick={this.setTitle.bind(this,'zhangsan')}>执行方法传值</button>
            </div>
        )
    }
}
export default Home;

 

二、表单事件：

获取input值的两个方法：

方法1：给input标签添加onChange方法进行监听，把输入的值通过event.target.value获取，然后赋值给state里面的input，取值时直接从this.state.input中取即可。

方法2：给input标签添加ref="username"属性且添加onChange方法进行监听，把输入的值通过this.refs.username.value获取，然后赋值给state里面的input，取值时直接从this.state.input中取即可。

import React from 'react';

class Home extends React.Component{
    constructor(props){
        super(props);
        this.state={
            input:'',
            inputStr:'默认input框内值'
        }
    }
    run2(event){
        //在触发DOM上某个事件时，会产生一个事件对象event，它包含所有与事件有关的信息
        // alert(event.target);
        event.target.style.background='red';
        //通过event.targe获取dom属性
        alert(event.target.getAttribute('aid'));
    }
    change=(e)=>{
        console.log(e.target.value);
        this.setState({
            input:e.target.value
        })
    }
    change2=(e)=>{
        //获取dom节点，给元素设置ref属性，通过this.refs.username来获取dom
        let val=this.refs.username.value;
        console.log("val===="+val);
        this.setState({
            input:val
        })
    }
    getInput=(e)=>{
        alert(this.state.input);
    }
    change3=(e)=>{
        this.setState({
            inputStr:e.target.value
        })
    }
    render(){
        return (
            <div>
                <button onClick={this.run2} aid='123'>事件对象演示</button>
                <h2>表单事件</h2>
                <input onChange={this.change}></input>
                <button onClick={this.getInput}>获取input的值----方法1:通过事件对象event</button>

                <input ref="username" onChange={this.change2} aid='456'></input>
                <button onClick={this.getInput}>获取input的值--方法2：通过ref获取dom节点</button>
                
                双向数据绑定
                <p>{this.state.inputStr}</p>
                <input value={this.state.inputStr} onChange={this.change3}></input>
            </div>
        )
    }
}
export default Home;

 

三、键盘事件：

通过onKeyUp来监听键盘抬起时的事件，通过e.keyCode来判断当前是哪个键在抬起。与之对应的是onKeyDown事件。

import React from 'react';

class Home extends React.Component{
    constructor(props){
        super(props);
        this.state={}
    }
    inputKeyUp=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode==13){
            alert(e.target.value);
        }
    }
    render(){
        return (
            <div>
                <input onKeyUp={this.inputKeyUp}></input>
            </div>
        )
    }
}
export default Home;