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

一、定义和调用方法：

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

在 React 中另一个不同是：不能使用返回 false 的方式阻止默认行为， 你必须明确的使用 preventDefault，例如下面的a标签。

值得注意的是，通过 bind 方式向监听函数传参时，在定义的监听函数中事件对象 e 要排在所传递参数的后面。

import React from 'react';

class Home extends React.Component{
    constructor(props){
        super(props);
        this.state={
            msg:"我是home的组件",
        }
    }
    //定义方法1：
    run() {
        alert('我是一个run方法');
    }
    //定义方法2：
    run2 = function () {
        alert('我是一个run方法222');
    }
    handleClick(tempStr, e){
        e.preventDefault();//阻止链接默认打开新的页面
        console.log('链接被点击---' + tempStr);
        //return false;
    }
    render(){
        return (
            <div>
                <button onClick={this.run}>点击按钮</button>
                <button onClick={this.run2}>点击按钮方法2</button>
                <a href="#" onClick={this.handleClick.bind(this, '传参')}>点我阻止默认行为和传参</a>
            </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的组件---改变了"
        })
    }
   
    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>
            </div>
        )
    }
}
export default Home;

说明：react更改数据用下面的方法：this.setState({ msg:'xxx' })

二、表单事件：

获取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;