Question

我有onChange道具，如此：

onChange={ (value) => this._onChange(value) }

这完全正常。但是，如果我尝试抽象，以便我不使用内联函数，我会收到错误。

_onChangeHandler = () => (value) => this._onChange(value)

然后在组件中

onChange={ this._onChangeHandler() }

这完全打破了组件。为什么这不起作用？

更新

onChange用于表单字段，在输入元素中，当我输入时，我看到[object Object]

Answer 1

我通常做

onChange={ this.onChange.bind(this) }

因此，您可以使用this参考。

Answer 2

您只需要执行工厂方法吗？

onChange={ this._onChangeHandler() } // <--notice the parens

Answer 3

我认为你应该使用

_onChangeHandler = (value) => this._onChange(value)

而不是

_onChangeHandler = () => (value) => this._onChange(value)

因为这会返回一个函数，该函数返回一个以给定值调用this._onChange的函数。

但你真正想要的是一个用给定值调用this._onChange的函数。

另外，不要在JSX中调用该函数，而只是分配它。否则，为onChange分配的内容是函数返回的内容。

onChange={ this._onChangeHandler }

Answer 4

在以下情况中，您违反了

中箭头功能的语法

_onChangeHandler = () => (value) => this._onChange(value)

箭头函数在=后面的=>符号后面的函数体中使用函数params，所以它应该是

_onChangeHandler = (value) => this._onChange(value)

当你打电话时

   onChange={ this._onChangeHandler() }

你没有为onChange事件分配一个函数，而是在每次组件渲染时评估一个值，现在从你在这个函数中调用this._onChange(value)开始，它可能会执行一个动作，导致DOM被渲染再次，所以onChange将再次被评估，因此将被评估函数，从而进入无限循环并破坏代码。你应该像

一样

onChange={ this._onChangeHandler.bind(this,value)}

或

onChange={()=> this._onChangeHandler(value) }

Answer 5

您需要将_onChangeHandler绑定到组件，该组件有两种方式：

1 / 手动使用.bind() ：

_onChangeHandler(value) {
  return this._onChange(value);
}

然后在组件中:( 绑定方法）

onChange={ this._onChangeHandler.bind(this) }

2 / 使用es6的语法，_onChangeHandler自行绑定：

_onChangeHandler = (value) => this._onChange(value);

然后在组件中:(不要使用this._onChangeHandler()，删除括号）

onChange={ this._onChangeHandler }

=====

如果这还不行，请随时在您的控制台上发布一些错误，谢谢

有关如何绑定方法的参考，请在此处阅读我的答案：