this.props.onChange（）的目的是什么？

Question

从反应快速启动：https://facebook.github.io/react/docs/lifting-state-up.html

该行的目的：

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

从未解释过，我无法弄清楚它的作用。 onChange是一种内置的道具方法吗？我认为道具只是组件的参数，为什么它可以调用函数？

Answer 1

我认为道具只是组件的参数，为什么它可以调用函数？

你是对的，但这些参数也可以是回调/函数。例如：

定义：

class Comp extends Component {
  handleChange(e) {
    this.props.onChange(e.target.value);
  }

  render() {
    return (<input onChange={this.handleChange.bind(this)) />
  }
}

用法：

<Comp onChange={(a) => console.log(a)} />

Answer 2

你错过了这句话：

如果有几个组件需要访问相同的状态，则表明状态应该被提升到最接近的共同祖先。在我们的例子中，这是Calculator。

您引用的代码来自组件TemperatureInput：

class TemperatureInput extends React.Component {
  handleChange(e) {
    this.props.onChange(e.target.value);
  }
  render() {
    return (
      <fieldset>
        <input value={value} onChange={this.handleChange} />
      </fieldset>
    );
  }
}

TemperatureInput是Calculator的儿童组成部分，TemperatureInput.onChange被分配到Calculator. handleCelsiusChange

class Calculator extends React.Component {
  handleCelsiusChange(value) {
    this.setState({scale: 'c', value});
  }
  render() {
    return (
      <div>
        <TemperatureInput
          scale="c"
          value={celsius}
          onChange={this.handleCelsiusChange} />
      </div>
    );
  }
}

Answer 3

我带着同样的问题来到这里，但我现在明白了（至少我认为我这样做）。问题是onChange类中的Calculator是一个道具，但在类TemperatureInput的渲染部分，它是一个事件监听器。有时我在React中看到这个，在两个完全不同的东西上使用相同的名称，我发现它很容易造成混乱。以下是代码块中发生的情况：

class TemperatureInput extends React.Component {
  handleChange(e) {
    this.props.onChange(e.target.value); **(2)**
  }
  render() {
    return (
      <fieldset>
        <input value={value} onChange={this.handleChange} /> **(3)**
      </fieldset>
    );
  }
}

class Calculator extends React.Component {
  handleCelsiusChange(value) {
    this.setState({scale: 'c', value});
  }
  render() {
    return (
      <div>
        <TemperatureInput
          scale="c"
          value={celsius}
          onChange={this.handleCelsiusChange} /> **(1)**
      </div>
    );
  }
}

1. 在Calculator，一个名为onChange的补充道具将handleCelsiusChange方法的引用传递给TemperatureInput
2. this.props.onChange()的TemperatureInput现在提到handleCelsiusChange()的Calculator
3. onChange={this.handleChange}是一个事件监听器，它将根据输入字段的变化触发handleChange()。

总之，onChange作为道具是自定义的，onChange作为事件监听器是内置的。道具只是将一个函数引用从祖先传递给孩子，所以你可以在孩子中运行它。

Answer 4

从SeattleFrey的答案中得到了线索，也许该代码的作者不应该在onchange上命名这个参数。像我这样的ReactJs的首发让人感到困惑。

我把它命名为myChange而不是onChange。它实际上是作为参数传入的函数。而e.target.value是该函数的参数.Props可以包含对象和函数，因为函数也是Javascript中的对象

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

  handleChange(e) {

    this.props.myChange(e.target.value);

  }

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

class Calculator extends React.Component {

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

  }

  render() {

    return (
      <div>
        <TemperatureInput
          scale="c"
          value={celsius}
          myChange={this.handleCelsiusChange} />

      </div>
    );
  }
}