反应不触发绑定到在数组映射中创建的 JSX 元素的事件

Question

我必须开发一个用于编辑幻灯片的小型 react + typescript (1.6) 应用程序。

所以应用程序很简单。在左侧，我有一个侧边栏，用于呈现所有现有的幻灯片，点击后，它会在右侧加载一个画布，用户可以在其中编辑内容。

此外，用户可以将幻灯片标记为“隐藏”或将其删除。

代码如下所示：

renderSlide(item: SlideBaseModel.Slide, index: number): JSX.Element {
    let cx = React.addons.classSet;
    let _classes = cx({
        "fa": true,
        "fa-eye": !item.visible,
        "fa-eye-slash": item.visible
    });

    return (
        <li className="slide-item"  draggable={true} onClick={this.onSlideClick.bind(this)} key={item.id}>
            <div className="index">{index + 1}</div>
            <div className="control remove" onClick={this.onRemoveSlideClick.bind(this)}>
                <i className="fa fa-times"></i>
            </div>
            <div className="control toggle-visibility" onClick={this.onToggleSlideVisibility.bind(this)}>
                <i className={_classes}></i>
                </div>
            <SlideComponent
                type={item.type}
                title={item.title}
                visible={item.visible}
                content={item.content}
                path={item.path}/>
        </li>);
}

render() {
    let _slides = this.state.slides.map(this.renderSlide, this);
    let cx = React.addons.classSet;
    let classes = cx({
        "sidebar": true,
        "sidebar-visible": this.props.visible
    });

    return (<ul className={classes}>
            {_slides}
            <li className="slide-item slide-add" onClick={this.onAddSlideClick.bind(this) }></li>
        </ul>);
}

现在，每当我单击“renderSlide”方法中绑定 onClick 的任何方法时，都不会触发该事件。

我尝试过类似的东西：

onClick={(e) => {console.log(e)}}

问题仍然存在。

我尝试创建一个数组并将其填充到 forEach 中，而不是 map，但它不起作用。 如果我在渲染方法中调用this.renderSlide(this.state.slides[0])，事件会起作用，所以它必须与数组相关。

附加代码

幻灯片道具

interface SlideProps {
    type: Enums.SlideType;
    title: string;
    content?: string;
    path?: string;
    visible: boolean;
}

生成的 JS 代码

Sidebar.prototype.renderSlide = function (item, index) {
    var itemData;
    var cx = React.addons.classSet;
    var _classes = cx({
        "fa": true,
        "fa-eye": !item.visible,
        "fa-eye-slash": item.visible
    });
    return (React.createElement("li", {"className": "slide-item", "draggable": true, "onClick": this.onSlideClick.bind(this), "key": item.id}, React.createElement("div", {"className": "index"}, index + 1), React.createElement("div", {"className": "control remove", "onClick": this.onRemoveSlideClick.bind(this)}, React.createElement("i", {"className": "fa fa-times"})), React.createElement("div", {"className": "control toggle-visibility", "onClick": this.onToggleSlideVisibility.bind(this)}, React.createElement("i", {"className": _classes})), React.createElement(SlideComponent, {"type": itemData.type, "title": itemData.title, "visible": itemData.visible, "content": itemData.content, "path": itemData.path})));
};
Sidebar.prototype.render = function () {
    var _slides = this.state.slides.map(this.renderSlide, this);
    var cx = React.addons.classSet;
    var classes = cx({
        "sidebar": true,
        "sidebar-visible": this.props.visible
    });
    return (React.createElement("ul", {"className": classes}, _slides, React.createElement("li", {"className": "slide-item slide-add", "onClick": this.onAddSlideClick.bind(this)})));
};

提前感谢您的帮助:)

---

更新 1

我试图查看是否为这些元素调用了 EventPluginHub.putListener（以及使用什么参数），但事实并非如此。我尝试了 Basarat 的建议，但问题仍然存在。

我看不到这里的问题。 :(

Answer 1

事件有效，所以它必须与数组相关

也许key 不是唯一的。考虑：<li className="slide-item" draggable={true} onClick={this.onSlideClick.bind(this)} key={index}>

一般代码审查

请注意，bind 被认为是有害的，因为您失去了任何类型安全性。这是来自lib.d.ts的签名

bind(thisArg: any, ...argArray: any[]): any;

如您所见，它返回any。删除它可能有助于发现代码中存在的其他一些打字错误。

renderSlide(item: SlideBaseModel.Slide, index: number): JSX.Element { 和 this.state.slides.map(this.renderSlide, this);

推荐你使用renderSlide = (item: SlideBaseModel.Slide, index: number): JSX.Element => {和this.state.slides.map(this.renderSlide);

Answer 2

发现问题。这是因为我在 componentDidMount 方法中检索数据而不是初始化（是的，我是新手）。

现在我遇到了另一个与此相关的问题，但我会发布另一个问题。