javascript - onClick 在 React 中不起作用

Question

“onClick”目前无法正常工作。有人可以帮我解决这个问题吗？我已经删除了所有不需要的东西。我应该收到“已点击此内容”的消息，但我没有收到。

import * as bootstrap from 'react-bootstrap';
import * as utilsHelper from '../../helpers/utils';

import {genEntityIconHTMLElement, getEntityLabel} from '../../helpers/entity';

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types';
import React from 'react';
import {isNil, isNil as _isNil} from 'lodash';
import request from "superagent-bluebird-promise";
import SearchField from "./parts/search-field";
import SearchResults from "./parts/search-results";


const {Alert, Button, Col, Grid, ListGroup, ListGroupItem, Row, ButtonGroup, DropdownButton, MenuItem, Pager} = bootstrap;
const {formatDate} = utilsHelper;

class RevisionsPage extends React.Component {
    constructor(props) {
        super(props);
        this.thisWasClicked = this.thisWasClicked.bind(this);
    }

    thisWasClicked(event) {
        alert("inside this was Clicked");
    }

    render() {
        return (
            <div id="revisionPage">
                <h1 onClick={this.thisWasClicked}>working?</h1>
            </div>
        );
    }
}


export default RevisionsPage;

Answer 1

您应该尝试箭头函数而不是绑定(bind)方法，ES6 提供了使用箭头函数进行事件绑定(bind)的最佳方法。

请使用箭头函数尝试下面的代码

import * as bootstrap from 'react-bootstrap';
import * as utilsHelper from '../../helpers/utils';

import {genEntityIconHTMLElement, getEntityLabel} from '../../helpers/entity';

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types';
import React from 'react';
import {isNil, isNil as _isNil} from 'lodash';
import request from "superagent-bluebird-promise";
import SearchField from "./parts/search-field";
import SearchResults from "./parts/search-results";


const {Alert, Button, Col, Grid, ListGroup, ListGroupItem, Row, ButtonGroup, DropdownButton, MenuItem, Pager} = bootstrap;
const {formatDate} = utilsHelper;

class RevisionsPage extends React.Component {

    constructor(props) {
        super(props);
    }

    thisWasClicked = (event) => {
        alert("inside this was Clicked");
    }

    render() {
        return (
            <div id="revisionPage">
                <h1 onClick={this.thisWasClicked}>working?</h1>
            </div>
        );
    }
}


export default RevisionsPage;