Stack Overflow на русском Asked on December 11, 2021
У меня возник вопрос по примеру из документации React
а конкретно по этой строчке кода:
handleChange(e) {
this.props.onTemperatureChange(e.target.value);
}
Судя по информации из документации, из родительского компонента пробрасывается функция, которая будет храниться в пропе TemperatureInput
с ключом onTemperatureChange
. Если посмотреть на значение этой функции, то там будет следующее:
this.setState({scale: 'c', temperature});
Получается, что раз мы вызываем эту функцию в TemperatureInput
, то и this
должен указывать на TemperatureInput
, однако он указывает на родительский Calculator
.
Чем можно объяснить такое поведение?
Если Вы пробрасываете функцию из родителя в компонент в качестве 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)
тут наглядно видно что вместе с функцией так же будет передан контекст.
Answered by Vasily on December 11, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP