在 React JS 中，我无法将值从子组件传递到父组件

这个问题是上一个问题在 React JS 中的后续问题，我如何告诉父组件子组件发生了某些事情？

这是我正在使用的代码示例...

我有一个问题和两个问题：

1) 尽管 'label' 在 的 render 方法中（我可以在调试器中看到它有一个值）InfoBox，但当它传递给 ContainingBox 的boxChosen方法时，它总是出现“未定义”。我在这里做错了什么？

2）在使用 JSX 构建 InfoBox 时，有什么方法可以减少重复（DRY this up）。特别是，让我selectBox={this.boxChosen}烦恼的是在 JSX 中为每个 InfoBox 实例重复

3) 孩子或父母对方法的命名是否有任何共同的模式或公认的做法？特别是，您会看到这段代码让我定义一个selectBox在子进程中调用的方法和另一个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 (
      <StyledInfoBox onClick={() => {
        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)
      }
      } >
        {label}
      </StyledInfoBox>
    )
  }
}

class ContainingBox extends React.Component {

  boxChosen =(label) => {

    // for some reason label comes out as undefined here
    console.log("boxChosen.......", label)

  }


  render() {
    return (
      <div>
        <InfoBox key={1} blurb={{label: "Aenean malesuada lorem"}} selectBox={this.boxChosen}  />
        <InfoBox key={2} blurb={{label: "Lorem Ipsum dor ameet"}} selectBox={this.boxChosen} />
      </div>
    )
  }
}

function App() {
  return (
    <div className="App">
      <ContainingBox />
    </div>
  )
}

export default App;