Javascript 一次点击不在反应

'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;

从“react bootstrap”导入*作为引导；
从“../../helpers/utils”导入*作为utilsHelper；
从“../../helpers/entity”导入{genEntityIconHTMLElement，getEntityLabel}；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“道具类型”导入道具类型；
从“React”导入React；
从“lodash”导入{isNil，isNil as_isNil}；
“超级代理蓝鸟承诺”的进口请求；
从“/parts/search field”导入搜索字段；
从“/parts/search results”导入搜索结果；
const{Alert，Button，Col，Grid，ListGroup，ListGroupItem，Row，ButtonGroup，DropdownButton，MenuItem，Pager}=bootstrap；
const{formatDate}=utilsHelper；
类RevisionsPage扩展React.Component{
建造师（道具）{
超级（道具）；
this.thisWasClicked=this.thisWasClicked.bind（this）；
}
单击此按钮（事件）{
警报（“在此内部已单击”）；
}
render（）{
返回(
工作
);
}
}
出口违约修正案；

也许箭头功能可以帮助您：

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 = () => {
        alert("inside this was Clicked");
    }

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


export default RevisionsPage;

import*作为“react bootstrap”的引导；
从“../../helpers/utils”导入*作为utilsHelper；
从“../../helpers/entity”导入{genEntityIconHTMLElement，getEntityLabel}；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“道具类型”导入道具类型；
从“React”导入React；
从“lodash”导入{isNil，isNil as_isNil}；
“超级代理蓝鸟承诺”的进口请求；
从“/parts/search field”导入搜索字段；
从“/parts/search results”导入搜索结果；
const{Alert，Button，Col，Grid，ListGroup，ListGroupItem，Row，ButtonGroup，DropdownButton，MenuItem，Pager}=bootstrap；
const{formatDate}=utilsHelper；
类RevisionsPage扩展React.Component{
建造师（道具）{
超级（道具）；
}
单击此按钮=（）=>{
警报（“在此内部已单击”）；
}
render（）{
返回(
this.thiswisclicked（）}>是否正常工作？
);
}
}
出口违约修正案；

也许箭头功能可以帮助您：

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 = () => {
        alert("inside this was Clicked");
    }

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


export default RevisionsPage;

import*作为“react bootstrap”的引导；
从“../../helpers/utils”导入*作为utilsHelper；
从“../../helpers/entity”导入{genEntityIconHTMLElement，getEntityLabel}；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“道具类型”导入道具类型；
从“React”导入React；
从“lodash”导入{isNil，isNil as_isNil}；
“超级代理蓝鸟承诺”的进口请求；
从“/parts/search field”导入搜索字段；
从“/parts/search results”导入搜索结果；
const{Alert，Button，Col，Grid，ListGroup，ListGroupItem，Row，ButtonGroup，DropdownButton，MenuItem，Pager}=bootstrap；
const{formatDate}=utilsHelper；
类RevisionsPage扩展React.Component{
建造师（道具）{
超级（道具）；
}
单击此按钮=（）=>{
警报（“在此内部已单击”）；
}
render（）{
返回(
this.thiswisclicked（）}>是否正常工作？
);
}
}
出口违约修正案；

实际上，我创建的代码正在运行

但是

.bind（）

方法是将

此

绑定到事件的旧方法。现在您将使用箭头函数

class RevisionsPage extends React.Component {

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

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

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;

export default class App extends Component {
  constructor(props) {
    super(props);
    this.thisWasClicked = this.thisWasClicked.bind(this);
  }
  thisWasClicked(event) {
    alert("inside this was Clicked");
  }
  handleClick = e => {
    alert("Arrow Clicked");
  };
  render() {
    return (
      <div className="App">
        <h1 onClick={this.thisWasClicked}>working?</h1>
        <h2 onClick={this.handleClick}>Arrow</h2>
      </div>
    );
  }
}

类修订页扩展了React.Component{
单击此按钮=（事件）=>{
警报（“在此内部已单击”）；
}
render（）{
返回(
工作
);
}
}

它使你的构造函数变得无用。所以你得到了一个更短的代码

---

我希望有帮助

实际上，我创建的代码正在运行

但是

.bind（）

方法是将

此

绑定到事件的旧方法。现在您将使用箭头函数

class RevisionsPage extends React.Component {

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

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

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;

export default class App extends Component {
  constructor(props) {
    super(props);
    this.thisWasClicked = this.thisWasClicked.bind(this);
  }
  thisWasClicked(event) {
    alert("inside this was Clicked");
  }
  handleClick = e => {
    alert("Arrow Clicked");
  };
  render() {
    return (
      <div className="App">
        <h1 onClick={this.thisWasClicked}>working?</h1>
        <h2 onClick={this.handleClick}>Arrow</h2>
      </div>
    );
  }
}

类修订页扩展了React.Component{
单击此按钮=（事件）=>{
警报（“在此内部已单击”）；
}
render（）{
返回(
工作
);
}
}

它使你的构造函数变得无用。所以你得到了一个更短的代码

---

我希望有帮助

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

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

class RevisionsPage extends React.Component {

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

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

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;

export default class App extends Component {
  constructor(props) {
    super(props);
    this.thisWasClicked = this.thisWasClicked.bind(this);
  }
  thisWasClicked(event) {
    alert("inside this was Clicked");
  }
  handleClick = e => {
    alert("Arrow Clicked");
  };
  render() {
    return (
      <div className="App">
        <h1 onClick={this.thisWasClicked}>working?</h1>
        <h2 onClick={this.handleClick}>Arrow</h2>
      </div>
    );
  }
}

import*作为“react bootstrap”的引导；
从“../../helpers/utils”导入*作为utilsHelper；
从“../../helpers/entity”导入{genEntityIconHTMLElement，getEntityLabel}；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“道具类型”导入道具类型；
从“React”导入React；
从“lodash”导入{isNil，isNil as_isNil}；
“超级代理蓝鸟承诺”的进口请求；
从“/parts/search field”导入搜索字段；
从“/parts/search results”导入搜索结果；
const{Alert，Button，Col，Grid，ListGroup，ListGroupItem，Row，ButtonGroup，DropdownButton，MenuItem，Pager}=bootstrap；
const{formatDate}=utilsHelper；
类RevisionsPage扩展React.Component{
建造师（道具）{
超级（道具）；
}
单击此按钮=（事件）=>{
警报（“在此内部已单击”）；
}
render（）{
返回(
工作
);
}
}
出口违约修正案；

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

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

class RevisionsPage extends React.Component {

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

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

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;

export default class App extends Component {
  constructor(props) {
    super(props);
    this.thisWasClicked = this.thisWasClicked.bind(this);
  }
  thisWasClicked(event) {
    alert("inside this was Clicked");
  }
  handleClick = e => {
    alert("Arrow Clicked");
  };
  render() {
    return (
      <div className="App">
        <h1 onClick={this.thisWasClicked}>working?</h1>
        <h2 onClick={this.handleClick}>Arrow</h2>
      </div>
    );
  }
}

import*作为“react bootstrap”的引导；
从“../../helpers/utils”导入*作为utilsHelper；
从“../../helpers/entity”导入{genEntityIconHTMLElement，getEntityLabel}；
从'@fortawe'导入{FontAwesomeIcon}