4.事件对象、表单事件、键盘事件、ref获取dom节点、react实现双向数据绑定

一、事件对象

class Home extends React.Component {
    run = (event) => {
        event.target.style.background = 'red';
        let aid = event.target.getAttribute('aid');
        console.log('event: ', event, aid);
    }

    render() {
        return (
            <div>
                <h1>我是home </h1>
                <button aid='123' onClick={this.run} >事件对象</button>
            </div>
        )
    }
}

二、表单事件

1.获取input的值

1.事件对象法

class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: ''
        }
    }

    iptChange = (e) => {
        let val = e.target.value;
        console.log('val: ', val);
        this.setState({
            name: val
        })
    }

    getIpt = () => {
        let name = this.state.name;
        console.log('name: ', name);
    }

    render() {
        return (
            <div>
                <input onChange={this.iptChange} />
                <button onClick={this.getIpt}>获取input的值</button>
            </div>
        )
    }
}

2.ref法

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: ''
        };
    }

    iptChange = () => {
        let val = this.refs.tipt.value;
        console.log('val: ', val);
        this.setState({
            name: val
        })
    }

    getIpt = () => {
        let name = this.state.name;
        console.log('name: ', name);
    }

    render() {
        return (
            <div>
                <h1>list</h1>
                <input ref="tipt" onChange={this.iptChange} />
                <button onClick={this.getIpt}>获取input的值</button>
            </div>
        );
    }
}

2.键盘事件-keydown,keyup

class Jianpan extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }

    keyupfn=(e)=>{
        let code = e.keyCode;
        if(code == 13){
            console.log('回车-抬起', e.target.value);
        }
    }

    keydownfn=(e)=>{
        let code = e.keyCode;
        if(code == 13){
            console.log('回车-按下', e.target.value);
        }
    }

    render() {
        return (
            <div>
                <input onKeyUp={this.keyupfn}/>
                <br/><br/>

                <input onKeyDown={this.keydownfn}/>
            </div>
        );
    }
}

三、双向数据绑定

class Shuangxiang extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '张三'
        };
    }

    iptChange = (e) => {
        this.setState({
            name: e.target.value
        })
    }

    render() {
        return (
            <div>
                <input value={this.state.name} onChange={this.iptChange} />
                <div>数据：{this.state.name}</div>
            </div>
        );
    }
}