47 lines
2.0 KiB
Markdown
47 lines
2.0 KiB
Markdown
---
|
||
title: Pass a Callback as Props
|
||
localeTitle: Передача обратного вызова в качестве реквизита
|
||
---
|
||
## Передача обратного вызова в качестве реквизита
|
||
|
||
### Описание
|
||
|
||
* Добавьте компонент `GetInput` в метод рендеринга в MyApp, затем передайте ему prop, называемый `inpu` t, назначенный `inputValue` из состояния MyApp. Также создайте `handleChange` называемое `handleChange` и передайте ему обработчик `handleChange` ввода.
|
||
* Добавьте `RenderInput` в метод рендеринга в MyApp, затем создайте опору с именем `input` и передайте `inputValue` из состояния в него.
|
||
|
||
### Советы
|
||
|
||
* `state` является свойством класса `Myapp` , поэтому используйте 'this.state' для получения значения объекта
|
||
* Чтобы узнать больше о состоянии и реквизитах, прочитайте « [Состояние и жизненный цикл», «](https://reactjs.org/docs/state-and-lifecycle.html) [Компоненты и реквизит»](https://reactjs.org/docs/components-and-props.html) .
|
||
|
||
### Решение
|
||
|
||
```javascript
|
||
class MyApp extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
inputValue: ''
|
||
}
|
||
this.handleChange = this.handleChange.bind(this);
|
||
}
|
||
handleChange(event) {
|
||
this.setState({
|
||
inputValue: event.target.value
|
||
});
|
||
}
|
||
render() {
|
||
return (
|
||
<div>
|
||
{ /* change code below this line */
|
||
<GetInput input={this.state.inputValue} handleChange={this.handleChange}/>
|
||
}
|
||
{ /* change code above this line */
|
||
<RenderInput input={this.state.inputValue}/>
|
||
}
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
|
||
``` |