Контекст при передачи функции в другой компонент React

Question

У меня возник вопрос по примеру из документации React

а конкретно по этой строчке кода:

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

Судя по информации из документации, из родительского компонента пробрасывается функция, которая будет храниться в пропе TemperatureInput с ключом onTemperatureChange. Если посмотреть на значение этой функции, то там будет следующее:

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

Получается, что раз мы вызываем эту функцию в TemperatureInput, то и this должен указывать на TemperatureInput, однако он указывает на родительский Calculator.

Чем можно объяснить такое поведение?

Answer 1

Если Вы пробрасываете функцию из родителя в компонент в качестве prop'a, то ее контекстом будет родитель:

const Input = ({ handleChange }) => <input onChange={handleChange} />

const Parent = () => {
   const [state, setState] = useState("")
   
   const handleChange = event => {
      setState(event.target.value)
   }

   return <Input handleChange={handleChange} />
}

При использовании классовых компонентов это более очевидно:

this.handleChange.bind(this)

тут наглядно видно что вместе с функцией так же будет передан контекст.

БЛОГ НА HUSL

Контекст при передачи функции в другой компонент React

Ответы (1 шт):