react基础事件&小案例

一.事件的绑定与参数传递

事件的绑定(三种方法)

① 方法不加括号
事件带括号会自动执行方法
普通执行事件不带括号 this.方法 将函数改为箭头函数
② 方法加括号
this.方法.bind(this) 用bind将当前的this传过去
③在constructor 中写 this.方法=this.方法.bind(this)

事件的参数传递

默认最后一个参数为事件的执行参数
可以用到 e.target e.pageX e.clientX e.timestamp

import React,{Component} from 'react';

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            msg:"消息"
        };
        this.getInfo=this.getInfo.bind(this);
    }
    getMsg=()=>{
        console.log(this.state.msg);
    }
    getMsgtwo=()=>{
        console.log(this);//会输出当前页面的this
        console.log(this.state.msg);
    }
    getInfo(){
        console.log(this);
        console.log(this.state.msg);
    }
    send(a,b,e){
        console.log(a,b,e);  //1,2,e
        console.log(e.target);
    }
    render() {
        return (
            <div>
                <button onClick={this.getMsg}>按钮</button>
                <button onClick={this.getMsgtwo.bind(this)}>按钮2</button>
                <button onClick={this.getInfo}>按钮3</button>
                <button onClick={this.send.bind(this,1,2)}>按钮4</button>
            </div>
        );
    }
}

export default Header;

二.react数据双向问题&表单

在react中数据是单向传递的,需要我们自己做数据双向

1.react获取dom元素

1） 先给元素设置ref=“name”
2） 在去方法里直接写this.refs.name 的具体操作

import React,{Component} from 'react';

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {  
          
        };
    }
    getref(){
        console.log(this.refs.name);    // <div>你好啊</div>
        this.refs.name.innerHTML="你好啊";
    }
    render() {
        return (
            <div>
                <div ref="name">获取dom元素</div>
                <button onClick={this.getref.bind(this)}>获取dom元素</button>
            </div>
        );
    }
}

export default Header;

2.表单事件中数据双向

① input文本框中要写onChange事件
② onChange事件中利用e写数据双向问题
③ react中设置state参数时必须用this.setState({ }) 去设置
因为state是一个对象，所以( )里边也是一个对象
this.state.biaodan=val;表面看起来可以，实际上是错误的

import React,{Component} from 'react';
import './Header.css'

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            biaodan:0,
            ck:[
                {ck:true,name:"篮球"},
                {ck:true,name:"羽毛球"},
                {ck:true,name:"足球"},
            ]
        }
    }

    //表单事件数据双向问题
    getbiaodan(e){
        //修改state上的值
        let val=e.target.value;
        this.setState({
            biaodan:val
        });
    }
    //复选框事件
    getcheck(index,e){
    //重新声明的一个空间
        let ele=this.state.ck;
        ele[index].ck=!ele[index].ck;
        this.setState({
            ck:ele
        })
        console.log(e.target.value);
    }
    
    render() {
        return (
            <div>
            //复选框
                <ul>
                    {
                        this.state.ck.map((val,index)=>{
                           return (
                            <li key={index}><input type="checkbox" checked={val.ck} value={val.name} onChange={this.getcheck.bind(this,index)}/>{val.name}</li>
                           )
                        })
                    }
                </ul>
             //普通文本框输入
                <p>{this.state.biaodan}</p>
                <input value={this.state.biaodan} onChange={this.getbiaodan.bind(this)}/>
            </div>
        );
    }
}

export default Header;

3.表单元素的限制性约束和非限制性约束

设置表单元素：select,input,checkbox,textarea写value让你onChange监听
限制性约束 （value（通过react实现双向绑定的值））
非限制性约束（defaultvalue 相当于原生的value）
① 限制性约束
有些表单元素上的value属性被限制，要用onChange事件来解决数据问题
以前写的input中的value属性和react中的value属性不一样，以前的value在react中是defaultValue
② 非限制性约束

三.react小案例

toDolist案例

在这里插入代码片