Question

首先我知道这个帖子：React onClick event on component

有没有办法直接对React组件执行此操作？这似乎没有在线程中得到解答。我知道如何将攻击的功能添加到更深层，但这只是额外的连接代码，使IMO更加脆弱。它对ListItem级别所做的任何更改都必须对互连进行。我想这会变得更糟，如果是一个nTh级别的子组件试图回到主状态。

我的案例

父 - ＆GT;列表 - ＆GT;列表项

我需要在list元素上有一个click事件才能在父元素上触发一个函数。我希望能够单击一个ListItem组件并让onClick事件返回到Parent并更新状态以触发将一个兄弟组件重新呈现给List我已经删除了很多样板。

父组件包装所有。这是我使用state更新渲染视图的地方。

var Parent = React.createClass({
    updateState:function(newCurrent){
        this.setState({current: newCurrent});
    },
    render: function() {
        return (
            <div className="Parent"  >
              <Current this.state.current />
              <List
                list={this.state.list} 
                updateCurrentVideo={this.updateCurrentVideo} />
            </div>
        );
    }
});

这里列出的是List元素在开始时描述，我想在每个ListItem上附加一个onClick事件，然后将其数据传递回父级更新状态。

不是将事件附加到组件内部而是必须像这样传递触发器。 ListItem-＆GT;列表 - ＆GT; Parent（主）。在我通过List的子项映射时附加监听器会很好。

var List = React.createClass({
    render: function() {
        var list = this.props.list.map(function(item,index){
            return (
                <ListItem  
                    onClick={ () => this.props.updateState(item) } />
            )
        }.bind(this));

        return (
            <div className="List">
                {list}
            </div>
        );
    }
});

在组件级别附加的onClick似乎并没有真正做任何事情。但是，如果我将它更改为这样并使用回调函数将prop传递给ListItem，那么它就会神奇地起作用。所以我想我的更大问题。

var ListVideos = React.createClass({
    handleClick:function(data){
        this.props.updateCurrentVideo(data)
    },
    render: function() {
        var list = this.props.list.map(function(item,index){
            return (
                <ListItem  
                    handleClick={this.handleClick(item) } />
            )
        }.bind(this));

        return (
            <div className="List">
                {list}
            </div>
        );
    }
});

然后将onClick附加到ListItem中的Component包装器

var ListItem = React.createClass({
    render: function() {
        return (
            <div className="ListItem" onClick={this.props.handleClick}> 
                // STUFF
            </div>
        );
    }
});

Answer 1

您可以让ListItem传递其所有道具，允许事件侦听器自动进入。

var ListItem = React.createClass({
    render: function() {
        return (
            <div className="ListItem" {...this.props}> 
                Stuff
            </div>
        );
    }
});

或者使用es6，您只能通过您不使用的那些，这是首选。

var ListItem = React.createClass({
    render: function() {
        var {text, ...props} = this.props;
        return (
            <div className="ListItem" {...props}> 
                {text}
            </div>
        );
    }
});

Answer 2

如果我明白你在问什么 - 你能不能通过父母以菊花链的方式从孙子手中调用祖父母的方法？ - 那么是的，你可以做到。

您的问题可能是因为在第一个示例中，当您创建List时，您为其指定了updateCurrentVideo的属性，该属性不存在，然后在您创建{{ 1}}，你给它一个指向ListItem但也不存在的属性。

它并没有真正解释为什么你的其他例子有效，但我猜测有一些印刷问题（this.props.UpdateState和List之间有什么区别？）或者你没有给我们确切的名字。错误命名的处理程序可能是React的静默失败源。

无论如何，一般的答案是这样的事情会起作用：

ListVideos

在调用回调之前需要在Child中处理onClick的情况下，你也可以在不使用匿名函数的情况下做更多的vanilla。

React，将onClick事件直接添加到Components，而不是在所述组件内添加render元素。

2 个答案: