В React, как передать параметр от дочернего компонента до родительского компонента?

В React, как передать параметр из дочернего компонента в родительский компонент?

В React JS у меня возникают проблемы при передаче значения из дочернего компонента в родительский компонент

этот вопрос является продолжением предыдущего вопроса. В React JS как мне сообщить родительскому компоненту, что что-то произошло с дочерним элементом?

Вот пример кода, с которым я работаю …

У меня одна проблема и два вопроса:

1) хотя ‘label’ находится в области видимости (и я вижу, что она имеет значение в отладчике) в методе рендеринга InfoBox , когда он передается методу boxChosen , он всегда boxChosen как ‘undefined’. что я тут не так делаю?

2) Есть ли способ уменьшить повторение (высушить это) при использовании JSX для создания InfoBox. В частности, меня беспокоит, что selectBox={this.boxChosen} повторяется для каждого экземпляра InfoBox в JSX

3) существует ли какая-либо распространенная модель или общепринятая практика именования методов у детей или родителей? В частности, вы увидите, что этот код позволяет мне определить один метод с именем selectBox в дочернем selectBox и другой boxChosen именем boxChosen в родительском. Это кажется мне произвольным, поскольку я просто выбрал два отдельных имени, которые не сталкивались, чтобы сделать его более понятным. Но мне кажется, что в более крупном приложении вам нужен последовательный шаблон именования функций, чтобы определить, какие методы были «сквозными» методами (в данном случае, selectBox ), просто передавая вещи родителям. Я не знаю только мысли о том, существует ли соглашение об именах.

заранее спасибо

 import React from 'react'; import styled from 'styled-components' import './App.css'; const StyledInfoBox = styled.div` width: 100px; border: solid 1px green; padding: 10px; cursor: pointer; ` class InfoBox extends React.Component { constructor({blurb}) { super() this.state = { label: (blurb ? blurb.label : ""), } } render() { const {label} = this.state return ( {amp}lt;StyledInfoBox onClick={() ={amp}gt; { const {label} = this.state // although 'label' is in scope here, it seems to not be // correctly passed up to selectBox this.props.selectBox(this.label) } } {amp}gt; {label} {amp}lt;/StyledInfoBox{amp}gt; ) } } class ContainingBox extends React.Component { boxChosen =(label) ={amp}gt; { // for some reason label comes out as undefined here console.log("boxChosen.......", label) } render() { return ( {amp}lt;div{amp}gt; {amp}lt;InfoBox key={1} blurb={{label: "Aenean malesuada lorem"}} selectBox={this.boxChosen} /{amp}gt; {amp}lt;InfoBox key={2} blurb={{label: "Lorem Ipsum dor ameet"}} selectBox={this.boxChosen} /{amp}gt; {amp}lt;/div{amp}gt; ) } } function App() { return ( {amp}lt;div className="App"{amp}gt; {amp}lt;ContainingBox /{amp}gt; {amp}lt;/div{amp}gt; ) } export default App; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector