个人中心
gpt4 book ai didi

javascript - 箭头函数 "this"绑定(bind)在 React 组件中不起作用

转载 作者：行者123 更新时间：2023-11-29 15:18:18 25 4
gpt4 key购买 nike

<分区>

据我了解，ES6 箭头函数“在调用它们时保留 this 上下文”。我在 React 组件中看到了使用它们在类方法中绑定(bind) this 的示例。我知道我可以像这样在构造函数中绑定(bind):

constructor(props) {
    super(props);
    this.getContent = this.getContent.bind(this);
    this.handleClick = this.handleClick.bind(this);
}

但是当我尝试使用箭头函数时

handleClick = (event) => {
    this.props.openForm();
}

出现以下错误

Module build failed: SyntaxError: Unexpected token (18:14)

  16 |   }
  17 | 
> 18 |   handleClick = (event) => {
     |               ^
  19 |     this.props.openForm();
  20 |   }
  21 |

为什么这不起作用？

这是完整的组件

import React from 'react';
import Section from './Section';
import { connect } from 'react-redux';
import * as actions from '../actions/actions';

class Contact extends React.Component {

  getContent() {
    return this.props.content || {};
  }

  handleClick = (event) => {
    this.props.openForm();
  }

  render() {
    return (
      <Section heading="Contact" bg="white">

          <div className="contact">

            <h3 className="contact__heading">{ this.getContent().heading }</h3>

            <p>{ this.getContent().text }</p>

            <button className="contact__button contact__btn-dialog" 
                onClick={ this.handleClick }>
              Send a message
            </button>

          </div>

      </Section>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    openForm: () => {
      dispatch(actions.showContactForm(true));
    }
  };
};

export default connect(
  null,
  mapDispatchToProps
)(Contact);

25 4 0
文章推荐： mysql - 统计每件售出的产品
文章推荐： android - 设置 descendantFocusability ="blocksDescendants"后， ListView 行中的 TextView 无法单击
文章推荐： android - 为什么此代码抛出 NumberFormatException Invalid int : ""?
文章推荐： android - 我的应用程序安装后回调？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com