首页 文章

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

提问于
浏览
1

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

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

My Case

父 - >列表 - >列表项

我需要在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>
        );
    }
});

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

而不是将事件附加到组件内部并且必须像这样传递触发器 . ListItem->列表 - >父() . 在我通过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>
        );
    }
});

2 回答

  • 2

    您可以让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>
            );
        }
    });
    
  • 0

    如果我明白你在问什么 - 你可以从没有菊花链接通过父母的孙子中调用祖父母的方法吗? - 那么是的,你可以做到 .

    你的问题可能是因为在第一个例子中,当你创建 List 时,你给它一个指向 updateCurrentVideo 的属性,它不存在,然后当你创建 ListItem 时,你给它一个指向 this.props.UpdateState 的属性,它也没有不存在 .

    它不是 ListListVideos 之间的区别?)或者你没有给我们确切的名字 . 错误命名的处理程序可能是React的静默失败源 .

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

    var Grandparent = React.createClass() {
        handleChange: function(update) {
            this.setState({data: update});
        },
        render: function() {
            return (
                <Parent handleChange={this.handleChange} />
            );
        }
    }
    
    var Parent = React.createClass() {
        render: function() {
            return (
                <Child handleChange={() => this.props.handleChange(changeValue)} />
            );
        }
    }
    
    var Child = React.createClass() {
        render: function() {
            return (
                <div onClick={this.props.handleChange}>Go</div>
            );
        }
    }
    

    在调用回调之前需要处理Child中的onClick的情况下,您还可以在不使用匿名函数的情况下执行更多的vanilla .

相关问题