如何使用“this”在反应组件中编写内联js事件处理程序代码

Question

我有一个 html 代码，我可以用 jsx 重写它

<div id="parent">                      
    <div id="child" onclick="this.parentElement.style.background = 'orange';">                          
        <img src="img/img2.png"></img>
    </div>
</div>;

这里，在jsx中，this指的是react组件。但是，在上面的 html 代码中，this指的是#child.

谁能告诉我如何#child在不编写单独的处理程序函数的情况下编写 jsx 中的 onclick 代码，但与上面编写的方法相同。

Answer 1

正如我到目前为止所发现的，没有办法像你所描述的那样构建 React 事件，但我对此进行了尝试并发现了一些有趣的事情：

要将这一行更改为 JSX，您必须将onclick事件替换为onClick，然后从内联 JavaScript 中删除引号并将其包含在数字括号中。所以它应该是这样的：

render: function() {
        return <div id="parent">                      
                  <input type='button' id="child" onClick={console.log(this)} value='Click Me'/>                
                </div>;
    }

但这里有一个问题，当您的组件安装时，它仅运行此事件一次。 这里我留下一个小提琴示例，您可以在其中使用它。

更新

答案是，你可以在 JSX 中编写内联事件处理程序，正如我所说，只需将你的代码包装到下面的数字括号中即可，这里有一个小提琴：

<input type='button' id="child" onClick={function(e){e.currentTarget.parentElement.style.background = 'red'; }} value='Click Me'/>

谢谢，我希望它能帮助你