Question

使我困惑的一件事是onChange事件。如下代码所示，onChange事件与handleChange函数一起使用。所以让我感到困惑的是事件参数。

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "empty"
    };
    // change code below this line
    this.handleChange = this.handleChange.bind(this);
    // change code above this line
  }
  // change code below this line
  handleChange(event) {
    this.setState({
      input: event.target.value
    })
  }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
      <input type="text" value={this.state.input} onChange={this.handleChange}></input>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

每个与onChange事件一起使用的函数都需要一个参数。如果答案是肯定的，为什么？
我用其他一些关键字替换了“事件”关键字，它仍然可以正常使用。如果我使用其他单词代替关键字“事件”，可以吗？

Answer 1

每个与onChange事件一起使用的函数是否都需要一个参数。如果答案是肯定的，为什么？

它们不需要使用event参数，因此您无需在回调函数中声明该参数，并且无论如何该函数都将被调用（当然，调用者仍将传递该参数，但是您可以如果您不需要它，请忽略它）。但是，如果您想知道发生了什么变化，那么您可能想使用事件参数的信息，对吧？

我将关键字“事件”替换为其他关键字，但仍然可以正常使用。如果我使用其他单词代替关键字“事件”，可以吗？

event是not a reserved word in JavaScript，您可以根据需要命名函数的参数，它的作用仍然相同，是的。

也许下面的示例将帮助您了解回调如何与JS一起使用。

请考虑以下函数...它的作用是让您注册一个每隔一定毫秒数都会被调用的函数。每当调用该函数时，您都会收到当前纪元时间：

const timerSubscription = (ms, fn) => {
  const id = setInterval(() => {
    fn(Date.now());
  }, ms);
  return () => clearInterval(id);
}

所以您可以这样使用它：

let count = 0;
const unsubscribe = timerSubscription(1000, () => {
  count++;
  console.log('One second passed');
  if (count === 5) {
    unsubscribe();
  }
});

或者您可以像这样使用它：

let start = Date.now();
const unsubscribe = timerSubscription(1000, (now) => {
  console.log('One second passed');
  if (now + 5000 >= start) {
    unsubscribe();
  }
});

它们执行几乎完全相同的操作，一个使用调用者传递给它的参数，而另一个则不使用。无论哪种方式，调用者都始终传递参数。

我对React中的onChange事件有疑问

1 个答案: