Question

我想在另一个这样的方法中调用一个方法，但从未调用过。

按钮：

<span onClick={this.firstMethod()}>Click me</span>

组件：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {..};
  }

  firstMethod = () => (event) => {
    console.log("button clicked")
    this.secondMethod();
  }

  secondMethod = () => (event) => {
    console.log("this is never called!")
  }

  render() {..}
}

第一个方法被调用，但第二个则不被调用。我试图添加到构造函数中

this.secondMethod = this.secondMethod.bind(this);

在所有其他解决方案中都推荐使用

，但似乎对我没有任何帮助。如何正确调用第二种方法？

Answer 1

这里有两个问题。

第一个：您定义的函数错误。

maxDistance

像这样，您正在从函数中返回另一个函数。因此，应该是：

firstMethod = () => (event) => {
    console.log("button clicked")
    this.secondMethod();
}

第二：您没有使用firstMethod = ( event ) => { console.log("button clicked") this.secondMethod(); }处理程序，而是立即调用该函数。

onClick

因此，应该是：

<span onClick={this.firstMethod()}>Click me</span>

如果使用第一个版本，则在组件首次呈现时，您的函数将立即运行，但单击不起作用。 <span onClick={() => this.firstMethod()}>Click me</span>需要一个处理程序。

在这里，我完全同意@Danko的评论。您应该将此onClick与函数引用一起使用。

onClick

使用此方法，因为组件将处理程序函数与引用一起使用，所以不会在每次呈现组件时都重新创建您的函数。另外，手动编写处理程序也很轻松。

最后，如果将功能定义为箭头功能，则无需<span onClick={this.firstMethod}>Click me</span>。

这是工作代码。

.bind

class App extends React.Component {

  firstMethod = () => {
    console.log("button clicked")
    this.secondMethod();
  }

  secondMethod = () =>
    console.log("this is never called!")

  // or maybe even better not using an arrow function for the
  // second method since it is already bound to `this` since we
  // invoke it from the firstMethod. For details, look the comments please.

  /* secondMethod() {
    console.log("this is never called!")
  } */
 

  render() {
    return(
      <span onClick={this.firstMethod}>Click me</span>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

尝试使用firstMethod = () => (event)而不是firstMethod = (event) =>，而不要尝试secondMethod = () => (event) => {

Answer 3

您的第二个方法返回一个新函数，该函数是多余的。
另外，您的第二种方法不能绑定，因为第一种方法已经具有上下文。

secondMethod = () => (event) => { ... }应该是secondMethod(evnt) { ... }

这是经过优化的有效示例https://codesandbox.io/s/pkl90rqmyj

Answer 4

坏消息是，您无法使用bind箭头功能，因为它们受词法约束。参见：

Can you bind arrow functions?

好消息是，“词法绑定”意味着他们应该已经将App作为其this，即应该没有显式绑定。您可能会通过在构造函数中用这种方式将它们重新定义为undefined或其他奇怪的事情。

Answer 5

尝试一下，它对我有用。

  firstMethod = () => {
    console.log("click handler for button is provided")
    return (event) => this.secondMethod(event);
  }

  secondMethod = (event) => {
    console.log("This is being called with", event);
  }

Answer 6

您可以使用以下网址检查这种方式吗：https://codesandbox.io/s/q4l643womw 我认为您使用了错误的绑定方法，但是在这里您可以看到一个示例

class App extends Component {
  constructor() {
     super();
     this.state = {
       num: 1,
     };
     this.firstMethod = this.firstMethod.bind(this);
     this.secondMethod = this.secondMethod.bind(this);
  }

  firstMethod() {
    this.secondMethod();
  }

  secondMethod() {
    this.setState({
      num: 2
    });
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.firstMethod}>click</button>
        <label>{this.state.num}</label>
      </div>
    );
  }
}

在reactjs中的方法中的调用方法

6 个答案: