React JS事件处理程序参数

Question

我正在阅读 ReactJS 文档中关于"Lifting State Up"的内容，有些不是很清楚。这里可以找到代码片段：https://codepen.io/valscion/pen/jBNjja?editors=0010 在 TemperatureInput 组件中，onTemperatureChange 事件处理程序调用 handleCelsiusChange，但后者包含一个名为 temperature 的参数。我们如何传递这个参数？在 onTemperatureChange 中没有传递任何参数。我缺少了什么？

希望有人能帮助我理解这个问题。

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

---

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

- coffeeak

---

如果您分享 TemperatureInput 组件的代码，我可以看到您在 onTemperatureChange 中传递了什么，这样会更好。 - Ritesh Bansal

我更新了问题。 - coffeeak

Answer 1

首先让我们看一下TemperatureInput组件。当它的输入元素触发change事件时，这将由TemperatureInput组件内声明的handleChange(e)处理。您会注意到它随后使用参数e.target.value（即输入元素的value属性）调用了this.props.onTemperatureChange。

this.props.onTemperatureChange从哪里来？它是由实例化它的父组件Calculator设置的。查看Calculator组件的render方法，您会注意到每个TemperatureInput实例的onTemperatureChange属性都设置为this.handle[Cel/Far]Change（这两个方法都在Calculator组件中声明）。

因此，当TemperatureInput组件调用this.props.onTemperatureChange时，实际上是调用了Calculator组件的handle[Cel/Far]Change方法。

- Francis

Answer 2

在TemperatureInput组件中，您正在传递函数（它的作用类似于指针）。

这是从计算器传递到TemperatureInput组件的。

现在我们看到，我们的函数handleCelsiusChange需要一个参数，因此当我们在TemperatureInput组件内调用onTemperatureChange函数时，我们必须传递一些变量。

正如您可以在下面的代码中看到的那样，您正在将参数传递给函数调用。

 handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

这是我们从TemperatureInput组件将参数传递给函数的地方

- mindaJalaj

Answer 3

在TemperatureInput组件中，onTemperatureChange事件处理程序调用handleCelsiusChange...

这个假设是不正确的。 您正在将对函数对象this.handleCelsiusChange的引用传递给render函数中的属性onTemperatureChange。

然后，在TemperatureInput类中通过调用此函数对象来使用它。

this.props.onTemperatureChange(e.target.value)

如果在JSX中调用handleCelciusChange，那么render将如下所示：

    <TemperatureInput
      scale="c"
      temperature={celsius}
      onTemperatureChange={this.handleCelsiusChange(some_value)} />

- Suraj Rao