React JSのテーブルセル内に動的ドロップダウンメニューを埋め込むにはどうすればよいですか？
アシケ
4列の動的テーブルがあります。4番目の列を動的なドロップダウンリストにして、ユーザーが値を変更できるようにします。
動的テーブルを作成するために、以下のチュートリアルに従いました。
https://blog.logrocket.com/complete-guide-building-smart-data-table-react/
私はReactの初心者です。
これが私がテーブルを必要とする方法です。内容がぼやけてすみません。
幸せな人
この例を見てください：
Table.Js
import React, { Component } from 'react'
class Table extends Component {
constructor(props) {
super(props)
this.state = {
students: [
{ id: 1, name: 'Wasif', age: 21, email: '[email protected]' },
{ id: 2, name: 'Ali', age: 19, email: '[email protected]' },
{ id: 3, name: 'Saad', age: 16, email: '[email protected]' },
{ id: 4, name: 'Asad', age: 25, email: '[email protected]' }
]
}
}
viewRow(id,e) {
alert('selectedId:'+ id);
localStorage.setItem('transactionId',id);
}
renderTableData() {
return this.state.students.map((student, index) => {
const { id, name, age, email } = student //destructuring
return (
<tr key={id}>
<td>{id}</td>
<td>{name}</td>
<td>{age}</td>
<td>{email}</td>
<td>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
<td><button onClick={(e) => this.viewRow(id, e)}>View Row Id</button></td>
</tr>
)
})
}
結果：
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
メニュードロップダウンreact-selectで上下のパディングを削除するにはどうすればよいですか？
- 2
Reactコンポーネント内にGithubGistを埋め込むにはどうすればよいですか？
- 3
react jsでドロップダウンのプレースホルダーを設定するにはどうすればよいですか？
- 4
Semantic-UI-Reactドロップダウンメニューで画像を選択するにはどうすればよいですか？
- 5
React / TypeScriptアプリのモジュールメソッドでVSCodeインテリセンスを取得するにはどうすればよいですか？
- 6
reactのドロップダウン値に基づいてブートストラップテーブルをフィルタリングするにはどうすればよいですか？
- 7
Facebookの送信ボタンをreactアプリに埋め込むにはどうすればよいですか？
- 8
React要素をコンポーネントに埋め込むにはどうすればよいですか？
- 9
React-Bootstrapでドロップダウンアニメーションを実装するにはどうすればよいですか？
- 10
Reactの「react-bulma-components」を使用してドロップダウンボタンとドロップダウンメニューの幅を設定し、それらの幅が親divを満たすようにするにはどうすればよいですか？
- 11
バックグラウンドJSアニメーションをreactアプリに統合するにはどうすればよいですか？
- 12
React-Nativeネイティブモジュールセットアップの依存関係を追加するにはどうすればよいですか？
- 13
インラインスタイルプロパティ（React）内の背景画像を遅延ロードするにはどうすればよいですか？
- 14
サブフォルダーにcreate-react-appを含むノードプロジェクトをGitHubにプッシュするにはどうすればよいですか？
- 15
Semantic UI Reactのドロップダウンアイテムをクリックしたときにモーダルをトリガーするにはどうすればよいですか？
- 16
React JSを使用してMongoDB配列をループしてテーブルをレンダリングするにはどうすればよいですか？
- 17
別のモジュールからReactのモジュールのメソッドにアクセスするにはどうすればよいですか？
- 18
（Reactプロジェクトの）非reactモジュール内でmoment（）ライブラリを使用するにはどうすればよいですか？
- 19
複数のハンドラーを作成せずに、フォーム内のsemantic-ui-reactドロップダウンオブジェクトの入力変更を処理するにはどうすればよいですか？
- 20
React Jsのテーブルにデータを表示するにはどうすればよいですか？
- 21
Reactレンダラーのブートストラップ：アプリの起動時にルートビューへの参照を取得するにはどうすればよいですか？
- 22
reactのドロップダウンのデフォルト値を設定するにはどうすればよいですか？
- 23
react jsを使用してカルーセルスライダーでカードアイテムを表示するにはどうすればよいですか？
- 24
Reactでファイルのダウンロードをトリガーするにはどうすればよいですか？
- 25
react-filepondによるファイルの自動アップロードを停止するにはどうすればよいですか？
- 26
react jsのテーブルグリッドにキーと値のペアを表示するにはどうすればよいですか？
- 27
react reduxとモーダルフォームを使用してテーブル内のデータを更新するにはどうすればよいですか？
- 28
React-Native：ファイルのダウンロード中に進行状況を表示するにはどうすればよいですか？
- 29
Material-uiにドロップダウンヘッダーをreactで実装するにはどうすればよいですか？
コメントを追加