Question

我附上一张描述我的问题的图片。我不明白什么是发送此参数的机制。不将任何参数插入调用函数时，React如何知道要发送什么值？

我真的很想解释，我很绝望。我需要了解该机制才能执行其他操作。

这是描述我的问题的照片：

以下是整个代码（您可以顺利启动）：

App.js：

import React, { Component } from "react";
import MyCheckbox from "./MyCheckbox";

const items = ["One", "Two", "Three"];

class App extends Component {
  componentWillMount = () => {
    this.selectedCheckboxes = new Set();
  };

  toggleCheckbox = label => {
    if (this.selectedCheckboxes.has(label)) {
      this.selectedCheckboxes.delete(label);
    } else {
      this.selectedCheckboxes.add(label);
    }

    for (const checkbox of this.selectedCheckboxes) {
      console.log(checkbox, "is selected.");
    }
  };

  createCheckbox = label => (
    <MyCheckbox
      label={label}
      handleCheckboxChange={this.toggleCheckbox}
      key={label}
    />
  );

  createCheckboxes = () => items.map(this.createCheckbox);

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-12">{this.createCheckboxes()}</div>
        </div>
      </div>
    );
  }
}

export default App;

MyCheckbox.js：

import React, { Component } from "react";

class MyCheckbox extends Component {
  state = {
    isChecked: false
  };

  toggleCheckboxChange = () => {
    const { handleCheckboxChange, label } = this.props;

    this.setState(({ isChecked }) => ({
      isChecked: !isChecked
    }));

    handleCheckboxChange(label);
  };

  render() {
    const { label } = this.props;
    const { isChecked } = this.state;

    return (
      <div className="checkbox">
        <label>
          <input
            type="checkbox"
            value={label}
            checked={isChecked}
            onChange={this.toggleCheckboxChange}
          />

          {label}
        </label>
      </div>
    );
  }
}

export default MyCheckbox;

Answer 1

当我们不将任何参数插入调用函数时，React如何知道要发送什么值？

不是。

Array.prototype.map遍历数组并为每个元素调用回调，然后将该元素传递给回调。

这是一个更简单的示例：

console.log(
  [1,2,3].map(x => x + 1)
)

您可以认为Array.prototype.map大致是这样实现的：

function map(callback) {
  // `this` is the array
  var result = [];
  for (var i = 0; i < this.length; i++) {
    result.push(callback(this[i]));
    //          ^^^^^^^^^^^^^^^^^
  }
  return result;
}

console.log(map.call([1,2,3], x => x + 1));

另一方面，

this.toggleChechkbox获取标签作为参数，因为MyCheckbox显式地将标签传递给

const { handleCheckboxChange, label } = this.props;
// ...
handleCheckboxChange(label);

因此，正如您希望看到的那样，没有任何魔法在发生。 Array.prototype.map的实现方式是将每个元素都传递给回调。

您创建了MyCheckbox，以便将label传递给处理程序。

这里根本不涉及反应。

相关：

使用参数处理事件方法而无需插入参数

1 个答案: