Question

我正在使用ES6类为组件在Reactjs中创建一个应用程序。代码按预期工作，直到我想用类参数调用类中的函数。

SampleClass.js

class SampleClass extends React.Component {
    constructor(props, context) {
      super(props, context);
      this.state = {
        backgroundColor: 'yellow'
      }
    }

    onChangeBackgroundColor(backgroundColor) {
        this.setState({
        backgroundColor: backgroundColor
      })
    }

    render() {
      return <div style={{backgroundColor: this.state.backgroundColor, padding: 10}}>
        <span onClick={this.onChangeBackgroundColor.bind(this)} style={{background: 'white'}}>
            Change element style
        </span>
      </div>
    }
}

React.render(<SampleClass />, document.getElementById('container'));

我可以在没有像this.onChangeBackgroundColor.bind(this)这样的参数的情况下调用函数。

但是，当我尝试将参数传递给函数时，我在控制台中收到错误 Uncaught TypeError: Cannot read property 'bind' of undefined。

参考小提琴：https://jsfiddle.net/purezen/s6ap3m8s/3/

Answer 1

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

如果你想让它们绑定到函数，你的参数应该在this之后进入绑定调用。

正如@ivarni所述，根据React文档，最好在构造函数中绑定，请参阅以下链接以获取更多信息

“我们建议您在构造函数中绑定事件处理程序，以便它们仅针对每个实例绑定一次：”

https://facebook.github.io/react/docs/reusable-components.html

Answer 2

我编辑了你的小提琴，传递了red值，它有效。

你可以看到它here

您需要将参数传递给bind函数

Answer 3

使用ES6 lambdas () =>处理点击绑定以更正此值的更好方法是使用ES6 lambdas render () { return <div style={{backgroundColor: this.state.backgroundColor, padding: 10}}> <span onClick={() => this.onChangeBackgroundColor(arg1, arg2)} style={{background: 'white'}}> Change element style </span> </div> }，因为它们在词汇上绑定了正确的值：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:text="Current amount:"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textCurRes"
            android:layout_marginRight="0.0dp" />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/editCurRes" />
    <Button
        android:text="OK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/buttonOk" />
</LinearLayout>

如何在ES6类中调用带参数的函数？

3 个答案: