Question

我从git存储库中偶然发现了这段代码

 updateColor = key => e => {
    const { value } = e.target;
    this.setState(
      state => ({ colors: { ...state.colors, [key]: value } }),
      () => {
        const { colors } = this.state;
        saveItem("colors", colors);
      }
    );
  };

在这里，这个人做了这样的事情

  updateColor = key => e => {

他这样称呼它

 <input
                  type="color"
                  placeholder="Primary Color"
                  onChange={this.updateColor("primaryColor")}
                  value={colors.primaryColor}
                />

在反应。

现在，理想情况下，我认为它等于这样的东西

const name = key => e => e

即函数返回函数参数返回参数

所以，如果我通过

name('varun')

它将返回我名字varun

但是它正在回报我

e => e

所以有人可以告诉我它的一般工作原理，以及这段代码的意义是什么。

Answer 1

函数updateColor返回另一个函数。这种模式在React组件中非常常见，您需要为每个子组件创建一个单独的事件处理函数。

这种方法也称为function currying，当您想在不同地方共享某些逻辑时，它非常有用。

示例：

const addNumbers = a => b => console.log(a + b)
const addTen = addNumbers(10)
addTen(5)    // 15
addTen(20)   // 30

函数参数返回函数参数

1 个答案: