向 React.Js 添加点击事件答案

【问题标题】：Adding click event to React.Js向 React.Js 添加点击事件
【发布时间】：2019-01-07 02:30:46
【问题描述】：

我正在学习 React.Js。我正在尝试附加一个事件以在控制台中写入一些内容，但是我无法触发我的函数。有谁知道我如何将 onClick 事件附加到反应 div？如果这是一个基本问题，我深表歉意，但我尝试了几种不同的方法，但都没有奏效。

我尝试了以下两种触发功能的方法，但都不起作用。

所以，我意识到事件不起作用的原因是因为我正在渲染服务器端。如果我在客户端上呈现，则事件触发。如果我最初在服务器上渲染，有谁知道如何触发它？

class Individual extends React.Component {
    handleClick = () => {
        alert("GREAT");
    }
    render() {
        const indDiv = {
            margin: '5px',
            width: '100px',
            height: '120px',
            cursor: 'pointer',
            border: '5px solid pink',
            color: 'blue',
            float: 'left'
        };

        return (
            <div>
                <div onClick={this.handleClick.bind(this)}>
                    Alert 1
                </div>
                <div onClick={() => this.handleClick}>
                    Alert 2
                </div>
                <div style={indDiv}>
                    {this.props.num}. {this.props.name}.
                </div>
            </div>
        );
    }
}

感谢为此做出贡献的所有人。在我发现因为我最初将它创建为服务器渲染的部分之后，我必须在页面渲染后附加事件。我使用的是 ReactJS.Net，必须使用 hydrate 单独初始化它。

【问题讨论】：

您是否使用 create-react-app 并使用最新版本的 React？如果是这样，请从 onClick 中删除 this
要么删除this，要么将点击处理程序绑定到构造函数中的类。
如果你像上面的代码一样声明thr函数，你不需要绑定它。你就这样写。 onClick={this.handleClick} 或 onClick={()=>{this.handleClick()}}

标签： javascript reactjs reactjs.net

【解决方案1】：

您的代码中调用处理函数的两种方式都不正确。

在您的代码中，handleClick 是一个箭头函数，因此不需要手动绑定。

如果它不是箭头函数，则手动绑定应始终仅在构造函数中完成。永远不要像在渲染中那样在其他任何地方进行绑定。

当您使用 onClick={() => this.handleClick} 时，这是错误的。它应该是 onClick={()=> this.handleClick()}。如果没有 Paranthesis，那么这是正确的 onClick={this.handleClick}

所以改变

    <div onClick={this.handleClick.bind(this)}>
                Alert 1
            </div>
            <div onClick={() => this.handleClick}>
                Alert 2
            </div>

到

    <div onClick={()=> this.handleClick()}>
                Alert 1
            </div>
            <div onClick={() => this.handleClick()}>
                Alert 2
            </div>

您不应该在组件中的任何其他地方进行绑定的原因除了构造函数，因为例如您直接在渲染中进行了绑定，所以在这种情况下发生的情况是，每次组件渲染和重新渲染时，它都会在 webpack 捆绑文件中创建一个新函数再次因此捆绑文件变大。因此建议只在构造函数中绑定它

【讨论】：

谢谢。这是正确的解决方案，但是我意识到这些事件仅在它们在客户端上呈现时才会触发。在服务器上渲染会阻止然后运行。你知道如何让它发挥作用吗？
对不起！我不知道服务器端渲染。请检查此线程可能会有所帮助stackoverflow.com/questions/36233309/…

【解决方案2】：

你需要在render方法之后声明handler方法。这是您在 jsfiddle 中代码的基本实现。

https://jsfiddle.net/ufyxwv8p/

class Individual extends React.Component {
    render() {
        const indDiv = {
            margin: '5px',
            width: '100px',
            height: '120px',
            cursor: 'pointer',
            border: '5px solid pink',
            color: 'blue',
            float: 'left'
        };

        return (
            <div>
                <div onClick={this.handleClick}>
                    Click to show in console
                </div>
                <div style={indDiv}>
                    {this.props.num}. {this.props.name}.
                </div>
            </div>
        );
    }
    handleClick = () => {
        console.log('this is:', this);
    }
}

ReactDOM.render(<Individual/>,document.getElementById("app"))

【讨论】：

订单在这种情况下没有任何区别。事实上，如果 render 不是类中的最后一个方法，许多标准 ESLint 配置会将其视为错误/警告。
但我不认为，我更改了其他任何内容以使其正常工作。我还认为javascript支持提升，但它没有绑定问题，因为箭头函数不需要这个绑定。
从技术上讲，您删除了问题中有关 Alert 2 onClick 处理程序的行，这是问题的原因，在其他答案中进行了描述。当您删除有问题的事件处理程序时，代码有效。方法的顺序不是原因。

【解决方案3】：

在这里尝试这样你定义你的 handleclick 函数的方式是错误的我已经在沙盒上在线编辑了你的代码以使其工作。以您在警报 1 上调用的方式调用函数，而不是以我上传图像的方式定义函数

Link of codesandbox of your code check that

Check this image of that code if you dont have time to go through whole code

【讨论】：

【解决方案4】：

Alert 1 上的点击处理程序已经在工作。当您使用() => {} 类属性语法时，不需要bind。

Alert 2 上的单击处理程序不起作用，因为您编写了一个返回另一个函数的内联箭头函数。你需要调用它，比如() => this.handleClick()。

这是您的代码的有效 sn-p。

class Individual extends React.Component {
  handleClick = () => {
    alert("GREAT");
  };
  render() {
    const indDiv = {
      margin: "5px",
      width: "100px",
      height: "120px",
      cursor: "pointer",
      border: "5px solid pink",
      color: "blue",
      float: "left"
    };

    return (
      <div>
        <div onClick={this.handleClick}>Alert 1</div>
        <div onClick={() => this.handleClick()}>Alert 2</div>
        <div style={indDiv}>
          {this.props.num}. {this.props.name}.
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Individual />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

【讨论】：

【解决方案5】：

你必须使用bind

onClick={this.handleClick.bind(this)}

或使用箭头函数

onClick={()=>this.handleClick()}

【讨论】：

应该绑定在构造函数中

【解决方案6】：

class Individual extends React.Component {
  handleClick = () => {
    alert("GREAT");
  };
  render() {
    const indDiv = {
      margin: "5px",
      width: "100px",
      height: "120px",
      cursor: "pointer",
      border: "5px solid pink",
      color: "blue",
      float: "left"
    };

    return (
      <div>
        <div onClick={this.handleClick}>Alert 1</div>
        <div onClick={this.handleClick}>Alert 2</div>
        <div style={indDiv}>
          {this.props.num}. {this.props.name}.
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Individual />, document.getElementById("app"));

【讨论】：