传递其他参数以绑定

Question

我有两个看起来像这样的函数：

  primaryImageLoaded () {
    this.setState({primaryImageLoaded: true})
  }
  secondaryImageLoaded () {
    this.setState({ secondaryImageLoaded: true })
  }

他们被称为这样（使用反应）：

onLoad={this.secondaryImageLoaded.bind(this)

这感觉过多，我只想拥有一个函数并将状态变量作为参数传递，但是如何将附加参数传递给.bind？是否可以将变量用作我传递给setState的对象中的键？

Answer 1

您可以通过调用功能时通过的其他参数将通过：

this.secondaryImageLoaded.bind(this, arg1, arg2)

如果您使用的是ecmascript 2015及以后，则可以将变量用作键，通过将其包装在方括号中：

this.setState({
    [myVar]: value
});

因此，您可以将其重写更像：

function imageLoaded(which) {
    this.setState({
        [which]: true
    });
}
onLoad={this.imageLoaded.bind(this, 'secondary')}

Answer 2

您可以将箭头函数用于定义您的函数，这样您就不需要绑定方法。

secondaryImageLoaded = () => {
    this.setState({ secondaryImageLoaded: true })
  }

之后，在您的JSX代码中：

onLoad={this.secondaryImageLoaded}

如果您想进一步了解，您阅读了本文