javascript - 无法将状态从父组件传递给子组件(番茄钟状态计数器)

Question

我是一个 React 新手，我正在尝试构建一个番茄钟。我实际上被困在尝试使按钮 + 和 - 更改我在状态上设置的数字。 在我的主应用程序组件中，我有:

class App extends React.Component{
  constructor(props){
    super(props)
    this.state ={
      breakValue: 5,
      sessionValue: 25
    }

现在我尝试将状态传递给 SetTimer 组件(它将处理这些按钮 + 和 -)以更新数字: 所以我创建了这个函数来传递状态(这是处理 + 按钮的示例):

handleUpdate = value => this.setState({
    breakValue : value+1,
    sessionValue: value+1
  })

我将该函数作为子组件内的 props 传递。 这是 SetTimer 子组件，其 props 位于 App 的 render 方法中:

<SetTimer handleUpdate={this.handleUpdate}  id="break" type= "Break" value={this.state.breakValue}

之后，我进入 SetTimer 组件并创建了另一个传递值参数 props 的函数:

class SetTimer extends React.Component {
    constructor(props){
        super(props)
    }

    click(){
        this.props.handleUpdate(this.props.value)

    }

我将 Onclick 函数传递给按钮标签:

<button onClick={this.click} 

编译器告诉我他们无法读取 click 函数内 Undefined 的属性。我已经使用这种方法在 parent 之间将状态传递给 child ，并且它总是有效。我在这里缺少什么？非常感谢你们的帮助

Answer 1

您正确地传递了 props，但错误地读取了它们。

让我们了解以下代码的作用是什么？

<button onClick={this.click} ... />

这会在按钮上添加单击事件以及与其关联的处理程序。众所周知，每种编程语言都在特定范围/上下文中运行代码块。对于此函数，默认情况下它将是文档的范围/上下文。

要使用 props，我们需要类组件 SetTimer 的上下文。

有两种方法，

1. 传递执行 onClick 的上下文。

<button onClick={this.click}

将点击函数设置为箭头函数，这样它就不会接受任何上下文并始终在组件的范围内运行。

click = () => {
  this.props.handleUpdate(this.props.value)
}