特定の行にカスタムclickHandlerを追加する方法

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私はテキストをトグルすることができました。上のコードでは、1行で動作するようにコードを修正しようとしていたため、thi.state.prop1のロジックが見つからない場合があります。そして、ついには、すべての行で動作していない状態になりました。明らかに1行では動作しません。要約すると、私の問題は、一意の行を識別し、その行のセクションのみを表示することです。

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を変更

：あなたはこれらの線に沿って何かを質問の私の理解あたりとして必要とされている

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

にクリックハンドラをアタッチする方法

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

が変化します。