在 React 中，子组件如何调用在其父组件的上下文中执行的函数？答案

【问题标题】：In React, how does a child component call a function, which executes in the context of it's parent?在 React 中，子组件如何调用在其父组件的上下文中执行的函数？
【发布时间】：2019-12-02 06:12:39
【问题描述】：

我试图从官方反应文档中理解这段代码：

https://codepen.io/gaearon/pen/WZpxpz?editors=0010


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

在输入更改时，我们调用this.props.onTemperatureChange(e.target.value)。

这个函数调用如何在父组件的上下文中执行？

纯 JavaScript 中的等效行为是什么？

是不是这样，当我们在props里面传递父组件的函数时，那个函数（即handleCelsiusChange）是绑定到父组件（(this.handleCelsiusChange.bind(this)）的，不管我们在哪里执行，它仍然是会根据自己的上下文进行更改吗？

如果我的描述不准确，请纠正我。

【问题讨论】：

是的，关于this.handleCelsiusChange.bind(this)，您是正确的。如果您对这篇博客文章做出反应，您会得到更多的想法。 tylermcginnis.com/this-keyword-call-apply-bind-javascript > 以及更多关于 'this' 关键字、绑定、应用和调用方法的信息。
是的(this.handleCelsiusChange.bind(this) 会将函数绑定到this，在您的情况下这是父组件您也可以阅读此developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 了解更多详细信息

标签： javascript reactjs

【解决方案1】：

正如@Farhan Tahir 和@Harsh kurra 指出的那样，您正在正确理解它。可能他们已经回答了您关于 React 工作和事件传播到父级的问题。所以，我将讨论第二部分——用纯 JavaScript 来做。

我在 Vanilla JS 中使用构造函数模式实现了一个简单的示例。看下面的代码就明白了。


// Writing Constructors for Parent and Child.
function Parent(name) {
    this.name = name;
    this.changeName = function(newName) {
        this.name = newName;
    };
}

function Child(changeName) {
    this.changeName = changeName;
}


// Creating instances and testing.

let p1 = new Parent('foo');
console.log(p1.name); // It will print 'foo'.

// Pass it to child and bind.
let c1 = new Child(p1.changeName.bind(p1));
c1.changeName('bar');

console.log(p1.name); // It will print 'bar'.

这就是幕后发生的事情。 React 有进一步的实现，以反映你的组件和其他东西的变化。

【讨论】：