react事件处理

一,事件处理

写法:
on+事件名称= {事件处理函数} 类组件触发写法
on+事件名称 = 事件处理函数 ---onclick={()=>{}} 函数组件触发写法

1.1类组件触发事件函数

//通过类组件绑定事件
class Fn extends React.Component{
    Click(){
        console.log("类组件绑定事件触发");
    }

    render(){
        return(
            <button onClick={this.Click}>点击 </button>
        )
           
        
    }
}

1.2函数组件触发事件函数

//函数组件绑定
function Fn(){
    function Click(){
        console.log("函数组件绑定事件触发");
    }

    return(
        <button onClick={Click}>点击</button>
    )

无状态组件(函数组件)和有状态组件(类组件)

因为函数组件只负责展示

state的基本使用
状态发生变化前端页面也要对应发生变化
如由0到1
初始数据写在

class App extends React.Component{
  //放初始数据的
  state={
    count:0
  }

  render(){
    return(
      <div>
        <h1>初始数据:{this.state.count}</h1>
        <button onClick={()=>{
          this.setState({
            count:this.state.count +1//设置值
          })
        }}>单击+1</button>
      </div>
    )
  }
}

一旦我们调用了setState导致数据发生变化的时候就会重新调用一次render方法

表单处理

用state值来控制表单里value的值

class App extends React.Component{

  state={
   txt:''
  }
  handleChange=(e)=>{
    this.setState({
      txt:e.target.value
    })
    console.log(e.target.value);
  }
  
  render(){
    return(
      <div>
        
        <input type="text" value={this.state.txt} onChange={this.handleChange}></input>
      </div>
    )
  }
}

例