What is the purpose of this.props.onChange ()?

Question

From a quick quick start: https://facebook.imtqy.com/react/docs/lifting-state-up.html

Line purpose:

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

never explained, and I cannot understand what he is doing. Is there a built-in props method onChange? I thought that props are just parameters for components, why can it call functions?

Answer 1

I thought props were just parameters for components, why can it call functions?

You are correct, but these parameters can also be callbacks / functions. For instance:

Definition:

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

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

Using:

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

Answer 2

You just missed this sentence:

, , . 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 prop, 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 , onChange . , .

Answer 4

SeattleFrey, , onchange. ReactJs, .

I call it myChange instead of onChange. This is actually a function passed as a parameter. And e.target.value is the parameter for this function. Files can contain objects as well as functions, since functions are also objects in 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>
    );
  }
}