React事件处理函数 和 作为props传入子组件的处理函数的不同

• 问题描述

  • 有时候我们会遇到事件处理函数的入参不知道从哪里来的的情况

    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>
        );
      }
    }
    

• 事件处理函数

  • 事件处理函数的调用方式

    handleEvent(e){
      this.setState({value: e.target.value});
    }
    ...
    onChange={handleEvent(event)} //在这里传入参数才是事件处理函数的调用方法。
    

• 作为props传入子组件的函数

  • 有时候我们也可以将函数作为props传入子组件中，如这个函数的参数需要在子组件中访问的时候。（这种使用方式的函数也像普通函数一样，最好先使用bind绑定了this对象）。

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

    这段代码中的 this.handleCelsiusChange实际上是将函数handleCelsiusChange传入了组件<TemperatureInput />中，这样在子组件中就可以通过this.props.onChange来访问这个函数

    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>
        );
      }
    }
    

• 造成误解的原因

  • 在这里造成误解的原因是父组件中将props的名称写的和onChange一样，为了避免误会，也可以写成parentMethod={ ... }，效果一样。