Question

我是React的新手，遇到了以下问题。

我有一个文件“ Cockpit.js”，其中包含一个组件，并在“ App.js”中呈现。有一个onClick事件处理程序（如下）：

<button className={btnClass} onClick={props.switch_name_handler1}>Switch 1</button>

应用于文件“ Cockpit.js”中的按钮，单击该按钮不起作用。在浏览器控制台或呈现的HTML中没有错误（加载页面或单击按钮时）。

在阅读本文https://reactjs.org/docs/handling-events.html之后，我试图更改传递给'switchHandler'函数的'event'参数的顺序（将其排在'Rocky'参数的第二位），但这没有用。

下面是文件'Cockpit.js'中的按钮代码：

<button className={btnClass} onClick={props.switch_name_handler1}>Switch 1</button>

“ Cockpit.js”的完整代码：http://freetexthost.com/k1c1t0565q

下面是文件“ App.js”中的代码，我将从其中将“ switch_name_handler1”属性发送到Cockpit.js中的按钮）：

switch_name_handler1={(event) => this.switchNameHandler.bind(this, 'Rocky', event)}

在'App.js'中定义的

switchNameHandler 函数：

switchNameHandler = (newName, event) => {
    this.setState(
      {
        persons: 
          [
            {name : newName, age: 22},
            {name : 'Tony', age: 12}
          ]
      }
    )   
  }

“ App.js”的完整代码：http://freetexthost.com/su06cj5ijq

“ Person.js”的完整代码以供参考：http://freetexthost.com/zyxyzd23tv

我想知道为什么点击不起作用？如果有人可以建议我针对这种情况的调试步骤（要记住一点），那将是很好的。如果您对此问题有任何需要，请告诉我，以便我更新问题。预先感谢！

更新：

我通过使用以下按钮代码修改“ Cockpit.js”文件解决了此问题（这是Vadim Hulevich的建议。

Old : 

<button className={btnClass} onClick={props.switch_name_handler1}>Switch 1</button>

New : 
<button className={btnClass} onClick={(event) =>props.switch_name_handler1(event)}>Switch 1</button>

我还从传递给“ App.js”文件中的switch_name_handler1的props对象中删除了“绑定”，如下所示：

Old : 

switch_name_handler1={(event) => this.switchNameHandler.bind(this, 'Rocky', event)}

New : 

switch_name_handler1={(event) => this.switchNameHandler('Rocky', event)}

我仍然不知道它为什么起作用，但是如果有人可以对此发表想法，那将是很棒的。

Answer 1

制作了一个小的工作示例来展示用例，该用例在您的用例上可能会很好地工作。

CodeSandbox -demo

点击按钮，无法在React.Js中使用

1 个答案: