javascript - React JS 事件处理程序参数

Question

我正在阅读 "Lifting State Up"在 React JS 文档中，有些东西我不是很清楚。代码笔可以在这里找到:https://codepen.io/valscion/pen/jBNjja?editors=0010

在TemperatureInput组件中，onTemperatureChange事件处理函数调用了handleCelsiusChange，但是后者包含一个温度参数。我们如何传递这个参数？ 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>
    );
  }
}

Answer 1

让我们先看看 TemperatureInput 组件。当其输入元素触发更改事件时，这由 handleChange(e) 处理(在 TemperatureInput 组件中声明)。您会注意到它随后调用 this.props.onTemperatureChange使用参数 e.target.value (这是输入元素的值属性)。

this.props.onTemperatureChange 在哪里来自？它由实例化它的父组件计算器设置。查看计算器组件的渲染方法，您会注意到 onTemperatureChange每个 TemperatureInput 实例的 prop 设置为 this.handle[Cel/Far]Change (在计算器组件中声明的两种方法)。

所以当 TemperatureInput 组件调用 this.props.onTemperatureChange , 它实际上是在调用 handle[Cel/Far]Change计算器组件的方法。