2.0 KiB
2.0 KiB
title | localeTitle |
---|---|
Pass a Callback as Props | Передача обратного вызова в качестве реквизита |
Передача обратного вызова в качестве реквизита
Описание
- Добавьте компонент
GetInput
в метод рендеринга в MyApp, затем передайте ему prop, называемыйinpu
t, назначенныйinputValue
из состояния MyApp. Также создайтеhandleChange
называемоеhandleChange
и передайте ему обработчикhandleChange
ввода. - Добавьте
RenderInput
в метод рендеринга в MyApp, затем создайте опору с именемinput
и передайтеinputValue
из состояния в него.
Советы
state
является свойством классаMyapp
, поэтому используйте 'this.state' для получения значения объекта- Чтобы узнать больше о состоянии и реквизитах, прочитайте « Состояние и жизненный цикл», « Компоненты и реквизит» .
Решение
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>
);
}
};