Question

我是React新手，我正在尝试制作Pomodoro Clock。我实际上是在卡住，试图使按钮+和-更改我在状态上设置的数字。在我的主要应用程序组件中，我有：

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
  })

我将该功能作为道具传递给了子组件。这是SetTimer子组件，在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道具。我已经使用这种方法在父母与孩子之间传递状态，并且一直有效。我在这里想念的是什么？非常感谢你们的帮助

Answer 1

实际上，问题应该是，无法读取父母发送的道具。您正确传递了它，但在不同的上下文中阅读。

让我们了解以下代码的作用吗？

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

这会将click事件添加到具有关联的处理程序的按钮上。众所周知，每种编程语言都在特定范围/上下文中运行代码块。因此对于此功能，因为我们没有添加任何范围/上下文，所以默认情况下它将是文档范围/上下文。

要使用道具，我们需要组件SetTimer的上下文。

有两种方法， 1.传递执行onClick的上下文。

<button onClick={this.click}

将click函数用作箭头函数，因此它将不接受任何上下文，并且始终在组件的范围内运行。
```
click = () => {
   this.props.handleUpdate(this.props.value)

}
```

无法将状态从父组件传递到子组件（番茄时钟状态计数器）

1 个答案: