ReactJS編集可能な表のセル

Question

単一の表のセルの値を編集して更新したい。私はその特定のセルのonClickと呼ばれる任意のセルのonClickと呼ばれる関数を作成しましたが、その列のすべての要素が置き換えられています。

私は間違っていますか？

https://jsfiddle.net/gkLe4qu0/ （Iステータス欄について話しています）

<tbody> 
    {requestsFiltered.map((request, i) =>(
    <tr key={i} className={request.status}> 
     <td> {request.title} </td> 
     <td onClick={() => this.editStatus(event)}> 
     <a id={request.id} data-toggle="tooltip" title="Click to edit status"> 
      { 
      this.state.isStatusClicked ? <StatusOptions /> : request.status 
      } 
     </a> 
     </td> 
     <td> {request.created_at.format('YYYY-MM-DD')} </td> 
     <td> {request.updated_at.format('YYYY-MM-DD')} </td> 
     <td> 
     <a href="#" id={request.id} onClick={() => this.deleteRow(event)}> 
      Delete 
     </a> 
     </td> 
    </tr> 
))} 
</tbody> 

Answer 1

コメントでのHardik Modhaで述べたように、あなたが行レベルの識別が欠落しているが、あなたは、この作業を取得するためにmapインデックスを活用することができます。別のstatusIdを維持する必要はありません。

<tbody> 
    {requestsFiltered.map((request, i) =>(
    <tr key={i} className={request.status}> 
     <td> {request.title} </td> 
     <td onClick={() => this.editStatus(event, i)}> 
     <a id={request.id} data-toggle="tooltip" title="Click to edit status"> 
      { 
      this.state.isStatusClicked == i ? <StatusOptions /> : request.status 
      } 
     </a> 
     </td> 
     <td> {request.created_at.format('YYYY-MM-DD')} </td> 
     <td> {request.updated_at.format('YYYY-MM-DD')} </td> 
     <td> 
     <a href="#" id={request.id} onClick={() => this.deleteRow(event)}> 
      Delete 
     </a> 
     </td> 
    </tr> 
))} 
</tbody> 

も変更、のようなものにeditStatus：

editStatus(event, index){ 
     console.log("edit status clicket"); 
     console.log(event.target.id); 
     this.setState ({ 
      isStatusClicked: index 
     }) 
} 

が行われた変更を参照してください。https://jsfiddle.net/nagtan3/gkLe4qu0/4/

は、あなたはまだコンボボックスの変更の選択を修正する必要があります。

applyStatusChange(event, index) { 
    const {value} = event.target; 
    let newRequestData = this.state.requests.slice(); 

    newRequests[index]['status'] = value; 
    this.setState ({ 
     requests: newRequests 
    }) 
} 

と上記の方法を次のように使用します。

<tbody> 
     {requestsFiltered.map((request, i) =>(
     <tr key={i} className={request.status}> 
      <td> {request.title} </td> 
      <td onClick={() => this.editStatus(event, i)}> 
      <a id={request.id} data-toggle="tooltip" title="Click to edit status"> 
       { 
       this.state.isStatusClicked == i ? <StatusOptions onChangeMethod={(event) => applyStatusChange(event, i)} /> : request.status 
       } 
      </a> 
      </td> 
      <td> {request.created_at.format('YYYY-MM-DD')} </td> 
      <td> {request.updated_at.format('YYYY-MM-DD')} </td> 
      <td> 
      <a href="#" id={request.id} onClick={() => this.deleteRow(event)}> 
       Delete 
      </a> 
      </td> 
     </tr> 
    ))} 
    </tbody>