Question

我试图通过传递params来在点击时调用函数，但是没有发生。页面加载后，我的所有函数都会被调用。

用参数处理onClick的正确方法是什么？

这是我的代码：

import React, { Component } from "react";
import { inject, observer } from "mobx-react";

@inject("store")
@observer
class ToDoList extends Component {
  constructor(props) {
    super(props);
    this.store = props.store;
    this.todoName = React.createRef();
  }

  formHandler = e => {
    e.preventDefault();
    this.store.listUpdater(this.todoName.current.value);
    e.target.reset();
  };

  showItem = item => {
    console.log(item);
  };
  render() {
    return (
      <div>
        <ul>
          {this.store.Store.todo.map(item => (
            <li onClick={this.showItem(item)}>{item}</li> 
            //calls on page loads.. looking to call only on click!!
          ))}
        </ul>
        <form onSubmit={this.formHandler}>
          <div className="form-group">
            <input type="text" ref={this.todoName} />
          </div>
        </form>
      </div>
    );
  }
}

export default ToDoList;

Answer 1

确实有几种方法。

快速简便，但不建议使用：

就编程而言，此解决方案是最快的，因为它们都是单行的。它们的缺点是，每当您重新渲染组件时，您都将生成一个新函数（() => ...就是这样做的）。通常情况下这没什么大不了的，除了在较大的集合中可能会给渲染带来一些额外的延迟。通常，这可以忽略不计。

<li onClick={() => this.showItem(item)}>{item}</li>

或

<li onClick={this.showItem.bind(this, item)}>{item}</li>

更详细，但推荐：

推荐的方法是只定义一次功能及其参数。在这里，我们的onClick在每次重新渲染时都没有获得新功能。相反，它具有对this.click的静态引用，该引用调用我们作为父项作为属性传递的回调以及参数。

<MyListItem onClick={this.showItem} item={item} />

MyListItem是您要编写的自定义组件。像这样：

class MyListItem extends React.Component {
  constructor() {
    super();
    this.click = this.click.bind(this);
  }

  click() {
    this.props.onClick(this.props.item);
  }

  render() {
    return (
      <li onClick={this.click}>{this.props.item}</li>
    );
  }
}

Answer 2

<ul>
      {this.store.Store.todo.map(item => (
        <li onClick={this.showItem.bind(this, item)}>{item}</li> 
        //calls on page loads.. looking to call only on click!!
      ))}
    </ul>

或

 <ul>
      {this.store.Store.todo.map(item => (
        <li onClick={() => this.showItem(item)}>{item}</li> 
        //calls on page loads.. looking to call only on click!!
      ))}
    </ul>

调用仅带有参数的函数的正确方法是什么？

2 个答案: