反應不觸發綁定到在數組映射中創建的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，但是它不起作用。 如果我在render方法中調用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方法中檢索了數據而不是初始化的原因（是的，我是新手）。

現在我有另一個與此相關的問題，但是我將發布另一個問題。