React16入门5-事件处理

React事件中阻止默认行为不是使用返回 false 的方式， 而是使用 preventDefault()

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>


<script type="text/babel">
    function ActionLink(){
        function handleClick(e) {
            e.preventDefault();
            console.log('链接已点击，拦截跳转');
        }
        return (
            <a href="https://baidu.com" onClick={handleClick}>
                点我
            </a>
            );
    }
    ReactDOM.render(
        <ActionLink />,
        document.getElementById('example')
    );
</script>

<div id="example"></div>

下面通过点击事件来控制开关组件Toggle的状态值status

    class Toggle extends React.Component {
        constructor(props) {
        super(props);
        this.state = {status: true};
     
        //这里的绑定是必须的，这样 `this` 才能在回调函数中使用
        this.handleClick = this.handleClick.bind(this);
      }
      
      handleClick() {
          this.setState(prevState => ({
              status: !prevState.status
          }));
      }
     
      render() {
          return (
              <button onClick={this.handleClick}>
                  {this.state.status ? 'ON' : 'OFF'}
              </button>
              );
          }
      }
      ReactDOM.render(
         <Toggle />,
         document.getElementById('example')
      );

如果你不想使用 bind，也可使用如下两种方式(箭头函数)作出调整

方式一

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>


<script type="text/babel">
    class Toggle extends React.Component {
        constructor(props) {
        super(props);
        this.state = {status: true};

      }
      
      handleClick = () => {
          this.setState(prevState => ({
              status: !prevState.status
          }));
      }
     
      render() {
          return (
              <button onClick={this.handleClick}>
                  {this.state.status ? 'ON' : 'OFF'}
              </button>
              );
          }
      }
      ReactDOM.render(
         <Toggle />,
         document.getElementById('example')
      );

</script>

<div id="example"></div>

方式二

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>



<script type="text/babel">
    class Toggle extends React.Component {
        constructor(props) {
        super(props);
        this.state = {status: true};
     
        //这里的绑定是必须的，这样 `this` 才能在回调函数中使用
        //this.handleClick = this.handleClick.bind(this);
      }
      
      handleClick() {
          this.setState(prevState => ({
              status: !prevState.status
          }));
      }
     
      render() {
          return (
              <button onClick={(e) => this.handleClick(e)}>
                  {this.state.status ? 'ON' : 'OFF'}
              </button>
              );
          }
      }
      ReactDOM.render(
         <Toggle />,
         document.getElementById('example')
      );

</script>

<div id="example"></div>

向事件处理程序传递参数

扩展
React事件处理函数必须使用bind(this)的原因

JavaScript bind()方法