Question

如何使用ES6语法将额外参数传递给onClick事件？

例如：

handleRemove = (e) => {

}

render() {
     <button onClick={this.handleRemove}></button>
}

我想将id传递给handleRemove函数，如下所示：

<button onClick={this.handleRemove(id)}></button>

Answer 1

请记住，在onClick={ ... }中，...是一个JavaScript表达式。所以

... onClick={this.handleRemove(id)}

与

相同

var val = this.handleRemove(id);
... onClick={val}

换句话说，您立即致电this.handleRemove(id)，并将该值传递给onClick，这不是您想要的。

相反，您希望使用已预先填充的参数之一创建 new 函数;基本上，您需要以下内容：

var newFn = function() {
  var args = Array.prototype.slice.call(arguments);

  // args[0] contains the event object
  this.handleRemove.apply(this, [id].concat(args));
}
... onClick={newFn}

有一种方法可以在ES5 JavaScript中表达：Function.prototype.bind。

... onClick={this.handleRemove.bind(this, id)}

如果你使用React.createClass，React会在实例方法中为你自动绑定this，除非你将其更改为this.handleRemove.bind(null, id)，否则它可能会抱怨。

您也可以简单地定义内联函数;如果你的环境或转换器支持它，那么arrow functions会缩短它：

... onClick={() => this.handleRemove(id)}

如果您需要访问该活动，可以直接传递：

... onClick={(evt) => this.handleRemove(id, evt)}

Answer 2

使用button元素的value attribute传递id，如

<button onClick={this.handleRemove} value={id}>Remove</button>

然后在handleRemove中，从事件中读取值：

handleRemove(event) {
...
 remove(event.target.value);
...
}

这样，每次重新渲染此组件时，都可以避免创建新函数（与使用箭头函数相比）。

Answer 3

使用箭头功能：

<button onClick={()=>{this.handleRemove(id)}}></button>

Answer 4

$('a[role=tab]').on('click', function (e) {
    var clickLevel = Number($(e.target).parent('li').attr('level'));
    $('div.tab-pane.active').each(function () {
        if (Number($(this).attr('level')) > clickLevel) {
            $(this).removeClass('active');
        });
});

Answer 5

到目前为止，没有人提到的是使handleRemove返回一个函数。

您可以执行以下操作：

handleRemove = id => event => {
  // Do stuff with id and event
}

// render...
  return <button onClick={this.handleRemove(id)} />

然而，所有这些解决方案都有在每个渲染上创建新功能的缺点。最好为Button创建一个新组件，它将分别传递id和handleRemove。

Answer 6

TL; DR：

不要在render方法中绑定函数（也不使用箭头函数）。见官方建议。

https://reactjs.org/docs/faq-functions.html

所以，有一个已接受的答案，还有几个指出相同的答案。并且还有一些注释阻止人们在render方法中使用bind，并且出于同样的原因也避免使用箭头函数（这些函数将在每次渲染时一次又一次地创建）。但是没有例子，所以我正在写一个。

基本上，你必须在构造函数中绑定你的函数。

class Actions extends Component {

    static propTypes = {
        entity_id: PropTypes.number,
        contact_id: PropTypes.number,
        onReplace: PropTypes.func.isRequired,
        onTransfer: PropTypes.func.isRequired
    }

    constructor() {
        super();
        this.onReplace = this.onReplace.bind(this);
        this.onTransfer = this.onTransfer.bind(this);
    }

    onReplace() {
        this.props.onReplace(this.props.entity_id, this.props.contact_id);
    }

    onTransfer() {
        this.props.onTransfer(this.props.entity_id, this.props.contact_id);
    }

    render() {
        return (
            <div className="actions">
                <button className="btn btn-circle btn-icon-only btn-default"
                    onClick={this.onReplace}
                    title="Replace">
                        <i className="fa fa-refresh"></i>
                </button>
                <button className="btn btn-circle btn-icon-only btn-default"
                    onClick={this.onTransfer}
                    title="Transfer">
                    <i className="fa fa-share"></i>
                </button>                                 
            </div>
        )
    }
}

export default Actions

关键是：

构造

this.onReplace = this.onReplace.bind(this);

方法

onReplace() {
    this.props.onReplace(this.props.entity_id, this.props.contact_id);
}

呈现

onClick={this.onReplace}

Answer 7

我使用以下代码：

<Button onClick={this.onSubmit} id={item.key} value={shop.ethereum}>
    Approve
</Button>

然后在方法内：

onSubmit = async event => {
    event.preventDefault();
    event.persist();
    console.log("Param passed => Eth addrs: ", event.target.value)
    console.log("Param passed => id: ", event.target.id)
    ...
}

结果：

Param在event =＆gt;中传递Eth addrs：0x4D86c35fdC080Ce449E89C6BC058E6cc4a4D49A6

Param在event =＆gt;中传递id：Mlz4OTBSwcgPLBzVZ7BQbwVjGip1

Answer 8

我正在使用React-Bootstrap。下拉列表的onSelect触发器不允许我传递数据。只是活动。所以请记住，您可以将任何值设置为属性，并使用javascript从函数中选择它们。拾取您在该事件目标中设置的属性。

    let currentTarget = event.target;
    let currentId = currentTarget.getAttribute('data-id');
    let currentValue = currentTarget.getAttribute('data-value');

Answer 9

在功能组件中，这很好用-自2020年以来成为新的React用户：）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <link rel="stylesheet" href="style.css">
</head>
  <body>
    <div id="black">
      <div id="yellow">
        <div class="page">
          <h1>Content</h1>
        </div>
      </div>
    </div>
  </body>
</html>

使用ES6语法通过onclick事件反应传递参数

9 个答案: