javascript - 如何使用 "this"在 react 组件中编写内联 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。

谁能告诉我如何在 jsx 中编写 #child 的 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>;
    }

但是这里有一个问题，它只在你的组件挂载时运行一次这个事件 Here i leave a fiddle example你可以在哪里玩它。

更新

答案是的，你可以在 JSX 中编写内联事件处理程序，正如我所说，只需将你的代码包装到下面的图括号示例和 fiddle is here 中即可。 :

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

谢谢，希望对你有帮助