Question

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

该行的目的：

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

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

Answer 1

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

你说得对，但这些参数也可以是回调/功能。 E.g：

定义：

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

在Calculator中，名为onChange的组合道具将方法handleCelsiusChange的引用传递给TemperatureInput

this.props.onChange()

TemperatureInput

handleCelsiusChange()

Calculator

onChange={this.handleChange}是一个事件监听器，它会在输入字段的更改时触发handleChange()。

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

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

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

4 个答案: