Мы бы написали базовый пример с родительским и дочерним компонентами. У родительского компонента будет значение счетчика. Дочерний компонент содержит две кнопки: увеличения и уменьшения. После нажатия кнопки мы соответствующим образом обновим значение счетчика родительского элемента.
Сначала мы должны создать родительский компонент с именем App и инициализировать его значением счетчика 0. Также мы определяем функцию с именем updateCounter, которая будет либо увеличивать, либо уменьшать значение в зависимости от переданного параметра.
Итак, наш родительский компонент будет следующим:
class App extends React.Component {
constructor (props) {
super (props);
this.state = {
counter: 0
}
this.updateCounter = this.updateCounter.bind (this);
}
updateCounter (type) {
var count = this.state.counter;
type = = 'приращение'? count ++: count -;
this.setState ({counter: count});
}
render () {
return (‹div›
Значение счетчика в родительском элементе: {this.state.counter}
‹/div›
)
}
}
Теперь мы должны создать дочерний компонент с двумя кнопками.
class Child extends React.Component {
constructor (props) {
super (props);
}
render () {
return (‹div›
‹H1› Здравствуйте, React .. ‹/h1›
‹p› Я являюсь дочерним элементом, а кнопки ниже - дочерними. Нажмите соответствующую кнопку, чтобы обновить значение счетчика в родительском элементе ‹/p›
‹Button› Увеличение ‹/button› ‹br/› ‹br/›
‹button› Уменьшение ‹/button›
‹/div›
)
}
}
Теперь, чтобы сделать функцию updateCounter в родительском компоненте доступной для дочернего компонента, мы передаем ее как свойство дочернему компоненту. Блок рендеринга в нашем компоненте Parent / App можно обновить следующим образом:
render () {
return (‹div›
Значение счетчика в родительском элементе: {this.state.counter}
‹Дочерний onClick = {this.updateCounter} /›
‹ / div ›
)
}
Чтобы использовать функцию в дочернем компоненте, теперь мы можем просто использовать {this.props.onClick} при нажатии кнопки в дочернем компоненте и передать соответствующий параметр
Наш блок рендеринга будет выглядеть следующим образом:
render () {
return (‹div›
‹h1› Здравствуйте, React .. ‹/h1›
‹p› Я являюсь дочерним элементом, а кнопки ниже - дочерними. Нажмите на соответствующая кнопка для обновления значения счетчика в родительской кнопке ‹/p›
‹onClick = {(e) =› this.props.onClick ('increment')} ›Increment ‹/button› ‹br/›‹ br / ›
‹ кнопка onClick = {(e) = ›this.props.onClick ('декремент')}› Уменьшение ‹/button›
‹/div›
)
}
Окончательный код:
class App extends React.Component {
constructor (props) {
super (props);
this.state = {
counter: 0
}
this.updateCounter = this.updateCounter.bind (this);
}
updateCounter (type) {
var count = this.state.counter;
type = = 'приращение'? count ++: count -;
this.setState ({counter: count});
}
render () {
return (‹div›
Значение счетчика в родительском элементе: {this.state.counter}
‹Дочерний onClick = {this.updateCounter} /›
‹/div›
)
}
}
class Child extends React.Component {
constructor (props) {
super (props);
}
render () {
return (‹div›
‹H1› Здравствуйте, React .. ‹/h1›
‹p› Я являюсь дочерним элементом, а кнопки ниже - дочерними. Нажмите соответствующую кнопку, чтобы обновить значение счетчика в родительском элементе ‹/p›
‹Кнопка onClick = {(e) =› this.props.onClick ('increment')} ›Увеличение ‹/button› ‹br/› ‹br/›
‹ кнопка onClick = {(e) = › this.props.onClick ('декремент')} ›Декремент ‹/button›
‹/div›
)
}
}
Рабочий пример того же можно найти в следующем плункере.
Демо:
