React - 如何将参数传递给事件处理程序

IT技术 javascript reactjs
2021-04-30 10:24:24

好的，所以我是 React 的新手，关于事件处理程序的一件事真的非常困扰我：我似乎无法直接回答如何将参数传递给它们。到目前为止，我看到了两种方式：

绑定 
props.squareClick.bind(this, argument)
排队 
onClick={() => props.squareClick(argument)}

我一直在读的最重要的事情是性能成本。由于内联函数或具有 Bind 的函数在重新渲染时被视为全新的函数，因此存在额外的 GC 开销，并且对于类组件，它可以使用 PureComponent 中断对 shouldComponentRender 的浅层检查。

然后有人说这是过度优化，我不应该担心，只需使用内联函数即可。这很酷，但老实说，所有这些相互矛盾的信息都让我感到困惑。

所以，我将包括一个代码示例。它来自我为练习 React 而制作的 Tic-Tac-Toe 应用程序。它是板上单个 Square 的功能组件。这个组件被重新用于所有的方块，一个键作为props（即TOP_LEFT）传入以指示它是哪个方块。还有一个点击处理程序，当点击 Square 时，一个事件被发送回父组件。为了让点击处理程序知道点击了哪个 Square，该键属性作为参数传入。

请查看此代码并给我反馈。这是 React 中可接受的做法吗？它会导致性能下降吗，这种性能下降会很大吗？最后，如果您的回答是我不应该这样做，请清楚地向我解释一个更好的做法。

import React from 'react';

const Square = props => {
    return (
        <div onClick={() => props.squareClick(props.key)}>
            <p>{props.value}</p>
        </div>
    );
};

export default Square;
3个回答

我通常做的是使用数据集：

import React from 'react';

const Square = props => {
    return (
        <div
          data-key={props.key}
          onClick={props.squareClick}>
            <p>{props.value}</p>
        </div>
    );
};

export default Square;

然后在方法本身上，您只需将您的值作为e.target.dataset.key.

或者你也可以把它变成一个类组件：

import React from 'react';

class Square extends React.Component {
    handleClick = e => {
      this.props.squareClick(this.props.key)
    }

    render() {
      return (
          <div onClick={this.handleClick}>
              <p>{this.props.value}</p>
          </div>
      );
    }
};

export default Square;

在 React 中使用 Typescript 将额外参数传递给事件处理程序，我这样做：

import React from 'react';

export default class MyComponent extends React.Component {

    constructor(props: any) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    render() {
        return (
            <div>
                <p onClick={(this.handleClick("Volvo"))}>Volvo</p>
                <p onClick={this.handleClick("Saab")} >Saab</p>
                <p onClick={this.handleClick("Mercedes")} >Mercedes</p>
                <p onClick={this.handleClick("Audi")} >Audi</p>
                <div id="selectResult">
                </div>
            </div>
        );
    }

    handleClick(selected: string): ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) {
        return (e) => {
            e.preventDefault();
            document.getElementById("selectResult")!.innerHTML = "You clicked: " + selected;
        }
    }

}

另请参阅 Codpen 中此示例的项目

对于您的示例，可以使用：

import React from 'react';

const Square = props => {
    const handleClick = () => props.squareClick(props.key);
    return (
        <div onClick={handleClick}>
            <p>{props.value}</p>
        </div>
    );
};

export default Square;

使用这种方法，只需对函数使用引用，函数本身不会每次都重新创建。但是，在某些情况下，人们不能使用这样的方法并寻求其他解决方案。这里有很多这样的问题：

如何将变量传递给函数引用？

其它你可能感兴趣的问题
上一篇铝制 PCB 加热床会减少热点吗？ 下一篇4D打印仿真工具软件