React 基础学习---事件处理(六)

React

发布日期: 2019-11-28

更新日期: 2019-12-08

文章字数: 391

阅读时长: 1 分

阅读次数:

React 元素的事件处理和 DOM 元素相似,但是有一点不同

React 事件的命名采用小驼峰式,而不是纯小写
使用 JSX 语法时你需要传一个函数作为事件处理函数，而不是一个字符串

例如:传统的 HTML

<button onclick="activateLasers()">
  按钮
</button>

在 React 中则不同

<button onClick="{activateLasers}">
  按钮
</button>

在 React 中你不能通过返回 false 来阻止默认行为,你必须使用 e.preventDefault()来阻止

例如

function handleClick(e)
{
  e.preventDefault();
  console.log("The Link was clicked")
}

render(){
  return (
    <a href="#" onClick="handleClick">
      Click me
    ></a>
  )
}

特别注意 this 指向在使用事件以前必须要在 constructor 里面注册事件,绑定事件

事件使用之前必须要绑定 this,要不然方法里面的 this 就是 undefined,绑定 this 写在构造函数里面

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: true
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      flag:true
    })
  }
  render(){
    return {
      <button onClick={this.handleClick}>
          点击我
      </button>
    }
  }
}
ReactDOM.render(
  <Toggle/>,
  document.getElementById("root")
)

向事件里面传递参数


class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: true
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(str) {
    console.log(str);
    this.setState({
      flag:true
    })
  }
  render(){
    return {
      <button onClick={()=>{this.handleClick("123")}}>
          点击我
      </button>
    }
  }
}
ReactDOM.render(
  <Toggle/>,
  document.getElementById("root")
)