Javascript 如何为指定行添加自定义clickHandler

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

我只是想先显示和隐藏一个文本，而不是切换显示按钮。我能做到。唯一发生的事情是所有行的文本都被切换

我尝试了很多方法来让它工作。下面的代码正在进行中，我不确定下一步该怎么做

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;

从“React”导入React；
类TradeTableView扩展了React.Component{
构造函数（）{
超级（）
此.state={
数据：[]
}
this.handleClickEvent=this.handleClickEvent.bind（this）；
}
handleClickEvent（事件）{
const name=event.target.name；
log（'handleClickEvent中的名称为'+Name'）；
}
componentDidMount（）{
log（'内部组件未安装..'）；
取（'http://localhost:3004/row')
。然后（响应=>{
返回response.json（）；}）
.then（responseData=>{console.log（responseData）；返回responseData；}）
。然后（（数据）=>{
//jsonItems=JSON.parse（items）；
this.setState（{data:data}）；
});
}
render（）{
返回(
交易日期

商品

侧面

数量

价格

交易对手

位置


{this.state.data.map（（项，键）=>{
让prop1='shouldHide'+键；
console.log（'道具为'+prop1'）；
返回(
{item.a}

{item.b}

{item.c}

{item.d}

{item.e}

{item.f}

{item.f}

{this.state.prop1？'Sample Text'：'Some Text'}
)
})}
);
}
}
导出默认贸易表视图；

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

---

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

如下更改HandleClick事件：

 handleClickEvent(event, index) {
            const name = event.target.name;
            console.log("index is", index);
            const stateData = [...this.state.data];
            stateData[index]= "some new value"
            this.setState({
               data: stateData,
            })

            console.log('Name in handleClickEvent is ' + name);
        }

更改将单击处理程序附加到的方式

onClick={(event) => this.handleClickEvent(event, key)}

---

根据我对问题的理解，需要一些类似的东西。

我在state中添加了一个

currentSelectedRow

属性来跟踪所选行。下面是具有最小配置的代码

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';

class TradeTableView extends React.Component {

  constructor() {
    super()
    this.state = {
      data: [{id:1,val:11},{id:2,val:22},{id:3,val:33}],
      currentSelectedRow : -1

    }
  }

  handleClickEvent = (event, key) =>{
    this.setState({ currentSelectedRow: key})
  }


  render() {
    return (
      <div className="Table">


        {this.state.data.map((item, key) => {
          return (
            <div key={key} className="Row" onClick={(e) => this.handleClickEvent(e, key)}>
              <div className="Cell">
                <p>{item.id}</p>
              </div>
              <div className="Cell">
                <p>{item.val}</p>
              </div>
              <div className="Cell">
               <p onClick={(e) => this.handleClickEvent(e, key)}>{this.state.currentSelectedRow === key ? 'Row Selected' : 'Row Not Selected'}</p>
              </div>
            </div>
          )
        })}
      </div>
    );
  }
}

render(<TradeTableView />, document.getElementById('root'));

从“React”导入React；
从'react dom'导入{render}；
从“./Hello”导入Hello；
类TradeTableView扩展了React.Component{
构造函数（）{
超级（）
此.state={
数据：[{id:1，val:11}，{id:2，val:22}，{id:3，val:33}]，
currentSelectedRow:-1
}
}
handleClickEvent=（事件，键）=>{
this.setState（{currentSelectedRow:key}）
}
render（）{
返回(
{this.state.data.map（（项，键）=>{
返回(
this.handleClickEvent（e，key）}>
{item.id}

{item.val}

this.handleClickEvent（e，key）}>{this.state.currentSelectedRow==key？'Row Selected'：'Row Not Selected'}
)
})}
);
}
}
render（，document.getElementById（'root'））；

---

谢谢你的帮助。。Sajith Dilshan的回答对我很有用。我想你的也行。但那个看起来更简单。所以我接受了这个答案。