访问反应哑组件中的键属性值

Question

如何访问我的哑组件中的 key 属性值？

我有这个愚蠢的组件：

const TagSummary = ({ tags, highlightTag }) => {
    if (!tags) {
        return <div />;
    }
    return (
        <div>
            {Object.keys(tags).map((tag) => {
                return (
                    <div key={ tag }>
                        <button type="button" onClick={ highlightTag }>
                            <pre>&lt;{ tag }&gt;</pre>
                        </button>
                        <p>{ tags[tag] }</p>
                    </div>

                );
            })}
        </div>
    );
};

我传入的方法是这样的：

highlightTag(event) {
    event.preventDefault();
    console.log(event.target);
}

我希望能够检索 key 属性以便执行其他类型的逻辑。我怎样才能找回它onClick？

Answer 1

这不是最好的方法，相反，您应该让按钮成为一个单独的组件，您可以在其中将 onclick 和键作为道具传递，然后在按钮组件中将两者合并在一起。快速而肮脏的方法如下

<button type="button" onClick={ highlightTag.bind(this, tag) }>

这将确保该参数始终提供给 highlightTag 函数。

虽然这个问题是当 React 检查组件是否有任何更改时，它总是 return true，因为 render 方法中的函数绑定。如果您不担心性能，您可以保持这种状态，但这是在渲染方法中使用绑定的陷阱

Answer 2

我不确定您是否需要在 highlightTag 函数中取回事件，但我会这样做

<button type="button" onClick={ev => {
  ev.preventDefault();
  highlightTag(tag); 
}}>

这将使您的函数 highlightTag 更具可重用性（以编程方式调用此函数，而不是通过用户交互调用）。它还会将 TagSummary 的实现细节与其父级解耦。

访问反应哑组件中的键属性值

Accessing key property value within react dumb component

javascript

ecmascript-6

reactjs

redux

react-redux

访问反应哑组件中的键 属性 值

Accessing key property value within react dumb component

javascript

ecmascript-6

reactjs

redux

react-redux

访问反应哑组件中的键属性值