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

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 上的逻辑，因为我试图修改代码以使其适用于单行。最后我进入了一种状态，它不适用于所有行，显然不适用于单行。总而言之，我的问题是识别唯一的行并仅显示该行的部分。

Answer 1

我添加了一个 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'));

Here is the working example