React OnClick 函数未绑定

Question

我有一个绑定到 currentAreas 组件的 onClick 处理程序。 onClick 处理程序在调用 currentAreas 组件时同时被调用，但之后不起作用。

当我尝试单击锚标记时，

onClick 不起作用，我认为这可能是由于我绑定 onClick 函数的方式所致。

currentAreas.js

import React, { Component, PropTypes } from 'react';

export default class currentAreas extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { onClick } = this.props;

    return(
        <div className="list-group panel">
          <a href="#demo3" className="list-group-item" onClick={onClick("All", "All")} >All</a>

        </div>
    );
  }
}

currentList.js（主要成分）

class currentList extends Component {
    constructor(props) {
      super(props);

      this.updateLocation = this.updateLocation.bind(this);
    }

  updateLocation(name, nameLocation){
    console.log(name);
    console.log(nameLocation);
  }

    render() {
        return (
           <div className="step-3-container">

            <CurrentAreas 
              onClick ={this.updateLocation} />
        </div>
      )
    }
  }

Answer 1

您在组件声明期间执行函数，这可能意味着您在渲染时触发它，而不是单击

onClick={onClick("All", "All")}

需要

onClick={onClick.bind(null, "All", "All")}

或

onClick={function(){ onClick("All", "All"); }}

react组件的onClick需要一个可以执行的回调。您正在传递 this.props.onClick 的 return 值，因为您会立即使用参数

调用它

Answer 2

每当您的 javascript 解释器 "sees" 一个“()”时，它会尝试执行“()”之前的函数。因此，您的代码实际做的是 executing onClick（来自 props 的代码），作为参数传递 "All" 和 "All".所以，您需要做的是，不要自己调用它，而是让 onClick 处理程序调用它。

换句话说，onClick 道具必须收到 function。

一个可能的解决方案是将你的 onClick 包装到一个箭头函数中，做类似的事情：

<a href="#demo3" onClick={() => onClick("All", "All")}>All</a>

或者，您可以 bind 函数的参数（绑定 returns 一个函数，因此它很适合 onClick）。

<a href="#demo3" onClick={onClick.bind(null, "All", "All")}>All</a>

第一个 bind 参数是绑定函数中的 this 值。

关于 bind 的 FMI：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

React OnClick 函数未绑定

React OnClick Function not Binding

bind

function

reactjs