Question

我有一个显示标记列表的组件，用户可以选择标记来跟踪它们。标签显示正常。我想获取所选标记并将其存储在新数组 tagsSelectedList 中。因此，当用户点击标记时，我想获取该标记并将其推送到 tagsSelectedList 。但是，在onClick放置在地图函数的li内后，我收到错误。

return (
    <li id={Tag.tagName} class="tag" key={Tag.id} onClick={this.selectTag}>{Tag.tagName}</li>
);

这是错误：

未捕获的TypeError：无法读取未定义的属性“selectTag”

Component.js：

let tags = [
    {id: "1", tagName: "Arts"},
    ...
    ...
    {id: "59", tagName: "Writing"}
}];

var tagsSelectedList = [];

export default class SignUpSubscribeTags extends React.Component {
    constructor(props){
        super(props);
    }

    selectTag = (e) => {
        console.log(e.target.id);
    }

    render() {
        let tagList = tags.map(function(Tag){
            var i = 0;
            return (
                <li id={Tag.tagName} class="tag" key={Tag.id} onClick={this.selectTag}>{Tag.tagName}</li>
            );
        });

        return(
            <div id="signup-process-wrapper-addTags">

                <div id="add_tags">
                    <ul id="tag_list">
                        {tagList}
                    </ul>
                </div>
            </div>
        );
    }
}

但是，如果我从 tagList 的return语句中删除onClick={this.selectTag}，

<li id={Tag.tagName} class="tag" key={Tag.id}>{Tag.tagName}</li>

在ul中放置一个li onClick={this.selectTag}，

                <ul id="tag_list">
                    <li id="tagName" class="tag" onClick={this.selectTag}>tagName</li>
                    {tagList}
                </ul>

它工作正常！我没有错。

我做错了什么？请帮我。谢谢。

Answer 1

您需要范围this，以便它引用React组件上下文

有几种方法可以做到这一点：

选项1：

使用bind（）

render() {
    let tagList = tags.map(function(Tag){
        var i = 0;
        return (
            <li id={Tag.tagName} class="tag" key={Tag.id} onClick={this.selectTag}>{Tag.tagName}</li>
        );
    }.bind(this));

    return(
        <div id="signup-process-wrapper-addTags">

            <div id="add_tags">
                <ul id="tag_list">
                    {tagList}
                </ul>
            </div>
        </div>
    );
}

选项2：

您可以使用ES6箭头功能来确定范围

    let tagList = tags.map((Tag) => {
        var i = 0;
        return (
            <li id={Tag.tagName} class="tag" key={Tag.id} onClick={this.selectTag}>{Tag.tagName}</li>
        );
    });

选项3：

map函数还接受第二个参数，指定this引用的内容

    let tagList = tags.map(function(Tag) {
        var i = 0;
        return (
            <li id={Tag.tagName} class="tag" key={Tag.id} onClick={this.selectTag}>{Tag.tagName}</li>
        );
    }, this);

reactjs - 函数在map函数内不起作用

1 个答案:

选项1：

选项2：

选项3：