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

Answer 2

像这样更改你的handleClickevent：

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

根据我对这个问题的理解，需要沿着这些方向做点什么。

如何为特定行

2 个答案: