React makeテーブルをクリックして詳細を編集する

Question

詳細を編集して更新するためにテーブル行をクリック可能にするにはどうすればよいですか？私はpouchdbからこれらの詳細を取得しています。

私はあなたの評価については、以下の私のコードの一部を貼り付けています：

this.state = {docs: []} 
this.db = this.props.db 

componentDidMount() { 
    this.updateDocs() 
    this.db.changes({ 
     since: 'now', 
     live: true 
    }).on('change', (change) => { 
     this.updateDocs() 
    }).on('error', (err) => { 
     console.error(err) 
    }) 
    } 

    updateDocs() { 
    this.db.allDocs({include_docs: true}).then((res) => { 
     var docs = res.rows.map((row) => row.doc) 
     this.setState({docs}) 
    }) 
    } 

、以下の表：

<div className='table-list'> 
    <table> 
     <thead> 
     <tr> 
     <th>Registration Type</th> 
     <th>First Name</th> 
     <th>Middle Name</th> 
     </tr> 
     </thead> 

     <tbody> 
     {this.state.docs.map((doc) => <DataRow key={doc._id} doc={doc} {...this.props} />)} 
     </tbody> 
    </table> 
    </div> 

class DataRow extends React.Component { 
    render() { 
    let {doc} = this.props 

    return (
     <tr> 
     <td>{doc.RegistrationInfo['registrationtype']}</td> 
     <td>{doc.RegistrationInfo['firstname']}</td> 
     <td>{doc.RegistrationInfo['middlename']}</td> 
     </tr> 
    ) 
    } 
} 

私は、行のそれぞれをクリックして、編集できるようにしたいです。

Answer 1

私の最初の提案 - これをしないでください。編集可能なグリッドは、あなた自身で実装するのは非常に難しいコンポーネントです。

のであなたの中から選択するいくつかのオプションがあります。彼らは非常にpricelyであり、それらのほとんどは、今のように反応のために非常に純粋なサポートを持っていますがKendoUI、Wijmoなど：

1. 編集可能なグリッドで使用既存の枠組みを。
2. 編集機能付きのスタンドアロングリッドがいくつかあります：ag-grid、react data gridなどです。それらの一部は無料で、その他は有料です。
3. fixed-data-table,react-virtualizedなどの強力なコンポーネントに基づいて、独自の編集可能なグリッドを開発することができます。このアプローチでは、まだいくつかのコーディングが必要ですが、多くの時間を節約できます。
4. 現在お試しのように独自のコンポーネントを作成してください。

   4.1：あなたはまだ＃4と一緒に行きたい場合は

あなたは、このようにそれを行うことができます。現在編集されているセルのステートストア列：editingColumn。

4.2。 <td>タグのonClickハンドラを割り当てる：<td onClick={(ev) => this.onCellClick(ev))}>ハンドラセット内editingColumn

4.3。あなたのレンダリングでは

<td>{this.renderCell('columnName')}</td>と

<td>{doc.RegistrationInfo['registrationtype']}</td>

を交換してください。

private renderCell(colName) 
{ 
    if(this.state.editingColumn >= 0 && this.state.editingRow >= 0) 
    { 
     // Render your editing control here 
     // Assign to its 'onChange' like event and save changes to this.props.RegistrationInfo[colName]; 
    } 
    else 
    { 
     return this.props.RegistrationInfo[colName]; 
    } 
} 

これは非常にラフな説明ですが、私はそれはあなたが行くのに得るのを助けることを願っています：

そしてrenderCellは次のようになります。