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指的是反应成分。但是，在上面的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'/>

谢谢，我希望它能帮到你

Answer 2

让安德鲁的点击处理程序内联：

ErrorType

Answer 3

在Click处理程序中，默认情况下有参数event，其中有属性.currentTarget，它引用被点击的元素

var Component = React.createClass({
    clickHandler: function (e) {
        e.currentTarget.parentElement.style.background = 'orange';  
    },

    render: function() {
        return <div id="parent">
            <div id="child" onClick={this.clickHandler}>
                <img src="http://www.w3schools.com/html/html5.gif" />
            </div>
        </div>;
    }
});

Example

您也可以像这样使用.refs

var Component = React.createClass({
    clickHandler: function () {
        this.refs.parent.style.background = 'orange';   
    },

    render: function() {
        return <div id="parent" ref="parent">
            <div id="child" onClick={this.clickHandler}>
                <img src="http://www.w3schools.com/html/html5.gif" />
            </div>
        </div>;
    }
});

Example

Answer 4

假设您要设置一个内联onClick处理程序。

您尝试这样写：

<button onClick={this.setState({"favorite": "cherries"})}>Click me</button>

但是该代码在渲染器上执行，根据我的经验，它将进入无限状态循环。

我通过将内联语句转换为内联函数解决了这个问题。

<button onClick={() => this.setState({"favorite": "cherries"})}>Click me</button>

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

4 个答案: