React事件处理函数参数

Question

这是React官方文档的一段代码，下面有两个事件处理函数handleCelsiusChange和handleFahrenheitChange，但是我找不到他们的参数value是来自哪里的，进行绑定的时候也只绑定了this。
请问他的事件处理函数的value参数是哪里来的？

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

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

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

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

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

Answer 1

這兩個函数handleCelsiusChange和handleFahrenheitChange并不是事件处理函数。

事件处理函数的基本语法是像下面这样，传入事件对象，然后针对事件中的值作处理:

handleEvent(e){
  this.setState({value: e.target.value});
}

能这样作必须是对应到可处理的DOM元素上，例如表单元件，文字输入栏、按钮等等，或是一般的DIV等等。

这一行是传入handleCelsiusChange函数，作为TemperatureInput组件的其一个props值，TemperatureInput子组件中可以用this.props.onChange调用这个父组件中的这个函数handleCelsiusChange，这是一种传递父组件中的函数，到子组件的方式，当然，像一般的函数一样，都要先进行bind(绑定)过this。

<TemperatureInput
          scale="c"
          value={celsius}
          onChange={this.handleCelsiusChange} />

真正的事件处理函数在TemperatureInput中，像下面的代码(已简化过):

class TemperatureInput extends React.Component {
  //...

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

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

事件的触发是在下面这个DOM元素:

 <input value={value}
               onChange={this.handleChange} />

当onChange触发时，调用handleChange像下面这样:

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

然后把e.target.value传到this.props.onChange对应的函数值，也就是上一层组件的handleCelsiusChange函数中。

handleCelsiusChange函数接收到后，会用这个传入值来更动state值，然后进行重渲染。

会造成误解是因为它把props的名称写得与事件用的onChange一样，父组件用了onChange这个props名称来传递函数作为值，实际上如果怕误解可以用别的名称，例如changeMethod或parentMethod，效用是一样的。

这是一种子组件传递数值到父组件的方式，大概也是内建可使用的一种方式。是一种迂廻的作法，两边(父组件与子组件)都要对应好才会正常运作，只适用于结构简单的组件中。

有点相似的问答: https://segmentfault.com/q/10...

Answer 2

TemperatureInput 里调用的时候传过来的。