如何为特定行添加自定义单击处理程序

Question

为了设置上下文，我是REACT的新手。我正在开发一个示例应用程序，我需要以表格格式显示交易数据。如果选择行，则应显示最右侧的删除按钮。否则它应该被隐藏。

我只是试图首先显示和隐藏文本，而不是使用显示按钮切换。我能够做到这一点。只有发生的事情是文本被切换为所有行。

我正在尝试一些事情来实现这个目标。以下代码正在进行中，我不知道下一步该怎么做，

import React from 'react';

class TradeTableView extends React.Component {

    constructor(){
        super() 
          this.state = {
            data: []
                  }

          this.handleClickEvent = this.handleClickEvent.bind(this);

    }

    handleClickEvent(event) {
        const name = event.target.name;
        console.log('Name in handleClickEvent is ' + name);
    }

    componentDidMount() {
        console.log('inside component did mount..');
        fetch('http://localhost:3004/row')
        .then(response => { 
            return response.json();})
        .then(responseData => {console.log(responseData); return responseData;})
        .then((data) => {
            // jsonItems = JSON.parse(items);
            this.setState({data: data});
          });
    }

    render() {
        return(
            <div className="Table">
                <div className="Heading">
                    <div className="Cell">
                        <p>Trade Date</p>
                    </div>
                    <div className="Cell">
                        <p>Commodity</p>
                    </div>
                    <div className="Cell">
                        <p>Side</p>
                    </div>
                    <div className="Cell">
                        <p>Quanity</p>
                    </div>
                    <div className="Cell">
                        <p>Price</p>
                    </div>
                    <div className="Cell">
                        <p>Counterparty</p>
                    </div>
                    <div className="Cell">
                        <p>Location</p>
                    </div>
                    <div className="Cell">
                        <p></p>
                    </div>
                </div>

                {this.state.data.map((item, key) => {
                    let prop1 = 'shouldHide'+key;
                    console.log('The prop is ' + prop1);

                    return (
                        <div ref={prop1} key={key} className="Row" onClick={this.handleClickEvent}>
                            <div className="Cell">
                                <p>{item.a}</p>
                            </div>
                            <div className="Cell">
                                <p>{item.b}</p>
                            </div>
                            <div className="Cell">
                                <p>{item.c}</p>
                            </div>
                            <div className="Cell">
                                <p>{item.d}</p>
                            </div>
                            <div className="Cell">
                                <p>{item.e}</p>
                            </div>
                            <div className="Cell">
                                <p>{item.f}</p>
                            </div>
                            <div className="Cell">
                                <p>{item.f}</p>
                            </div>
                            <div className="Cell">
                                <p onClick={this.handleClickEvent}>{this.state.prop1 ? 'Sample Text':'Some Text'}</p>
                            </div>
                        </div>
                    )
                })}
            </div>
        );
    }
}

export default TradeTableView;

这是我的组成部分。如果您可以让我知道如何仅为特定行切换文本，我很可能会使用知道如何切换按钮（我的原始用例），然后单击按钮删除行。我将非常感谢你的帮助。

P.S我能够切换文本。您可能在上面的代码中找不到thi.state.prop1上的逻辑，因为我试图修改代码以使其适用于单行。最后我进入了一个状态，它不适用于所有行，显然不适用于单行。总而言之，我的问题是识别唯一行并仅为该行显示一个部分。