React 中的柯里化事件处理程序答案

【问题标题】：Currying event handlers in ReactReact 中的柯里化事件处理程序
【发布时间】：2017-05-11 13:11:57
【问题描述】：

我正在尝试在一个组件上编写一个（咖喱？）onChange 事件处理程序，该处理程序将接收一个key 参数，这将让它知道要更新状态对象中的哪个键。代码不会编译，说'key' is not defined。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: null,
      lastName: null
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (key) = (event) => {
    console.log(key, event);
  }

  render() {
    return (
      <div>

        <form>
          <input onChange={this.handleChange('firstName')} value={this.state.firstName} />
          <input onChange={this.handleChange('lastName')} value={this.state.firstName} />
        </form>

        {JSON.stringify(this.state, null, 4)}
      </div>
    );
  }
}

【问题讨论】：

handleChange = (key) => (event) =>
为什么要让它如此复杂，使用这个：onChange={(e) => this.handleChange('firstName', e)} 然后使用handleChange 像这样：handleChange(key, e){console.log(key, e)}
@madox2 谢谢！我不敢相信我错过了。
@MayankShukla 因为在那里使用回调意味着每次重新渲染都会创建一个函数，这意味着垃圾收集器需要做更多的工作（或者我被告知）。我也想学习咖喱！
@hazardous：我很好奇——你在哪里划定函数工厂和柯里化之间的界限？ OP 编写的代码似乎与您链接的“什么是柯里化”问题的公认答案非常相似（减去箭头函数）。

标签： javascript reactjs functional-programming currying

【解决方案1】：

您必须在 OnChange 处理程序上同时传递 event 和 key。

这样做

<input onChange={this.handleChange.bind(this,'firstName')} value={this.state.firstName} />

onChange 应该是

 handleChange = (key, event) => {
    console.log(key, event);
  }

这将允许event 和key 都被传递并且函数将起作用。

【讨论】：

您的解决方案确实为每次渲染创建一个新函数。这正是Function.prototype.bind 所做的。

【解决方案2】：

我认为在您的代码中，您只是忘记在初始化第一个函数名称后放置箭头函数：

handleChange = (key) = [!!! HERE - should be an arrow !!!] (event) => {
  console.log(key, event);
}

尝试使用这个：

handleChange = (key) => (event) => {
  console.log(key, event);
}

因此，这样您的第一个具有参数key 的函数将返回另一个具有参数event 的函数。

【讨论】：