将点击事件添加到 React.Js

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

我已经尝试了两种触发下面显示的功能的方法，但都不起作用。

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

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，必须使用水合物单独初始化它。

调用处理程序函数的两种方式在代码中都是不正确的。

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

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

当你使用 onClick={（） =>this.handleClick} 时，这是错误的。它应该是onClick={（）=> this.handleClick（）}。如果没有偏执，那么这是正确的 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 捆绑文件中创建一个新函数，因此捆绑文件变大。因此，建议仅在构造函数中绑定它

您需要在 render 方法之后声明处理程序方法。这是 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"))

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

代码沙箱的链接

检查

如果您没有时间浏览整个代码，请检查该代码的此图像

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

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

下面是代码的工作片段。

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>

你必须

使用bind

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

或使用箭头功能

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

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"));

相关内容

最新更新

热门标签：