React入门3事件方法，表单传值

继续调整Home.js

import React,{Component} from 'react';

class Home extends Component{

    constructor(props){
        super(props);

        //定义数据
        this.state={
            id:123,
            name:"Tom",
        }
    }
	//自定义方法
    run(){
        alert('触发run方法');
    }

    render(){
        return (
            <div>
                <button onClick={this.run}>按钮</button>
            </div>
        )
    }
}
//暴露这个Home组件
export default Home;

把组件的this对象传入自定义方法里面

第一种方案

//标签事件方法中传入

  	run(){
        	alert(this.state.name)
  	}
  	
  	<button onClick={this.run.bind(this)}>按钮</button>

第二种方案

//构造函数中改变

	this.run = this.run.bind(this);

 	run(){
        	alert(this.state.name)
 	 }
 	<button onClick={this.run}>按钮</button>

第三种方案（推荐使用这种方案）

//使用箭头函数
	 run=()=> {
    		alert(this.state.name)
 	 }
	<button onClick={this.run}>按钮</button>

表单传值

vue中可以通过v-model实现双向绑定；
React只能通过标签的相关监听事件来给变量赋值达到绑定的目的，如标签input使用Change事件，最后还需要手动来绑定input value的值为this.变量

Home.js代码如下

import React,{Component} from 'react';

class Home extends Component{

    constructor(props){
        super(props);

        //定义数据
        this.state={
            id:123,
            name:"Tom",
            //该变量用于记录input的value
            inputValue:"",
        }

    }

    inputChange=(e)=>{
        //console.log(e.target.value);
        this.setState({
            inputValue:e.target.value
        });
    }

    getInputValue=()=>{
        alert(this.state.inputValue);
    }

    render(){
        return (
            <div>
                <input onChange={this.inputChange} value={this.state.inputValue}/>
                <button onClick={this.getInputValue}>获取input的value</button>
            </div>
        )
    }
}
//暴露这个Home组件
export default Home;