reactjs - 函数在地图函数中不起作用

Question

我有一个显示标签列表的组件，用户可以选择标签来关注它们。标签显示正常。我想获取选定的标签并将其存储在一个新数组 tagsSelectedList 中。因此，当用户单击一个标签时，我想获取该标签并将其推送到 tagsSelectedList。但是，我在 map 函数的 li 中放置了 onClick 后出现错误。

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

这是错误：

未捕获的类型错误：无法读取未定义的属性“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 的返回语句中删除 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：

使用绑定()

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);