[解決済み] reactstrapのドロップダウンで選択されたアイテムを設定する方法は?
2022-02-12 04:16:06
質問
reactstrapのドロップダウンで選択された項目を設定する方法は?
ドロップダウンの例があります。 https://reactstrap.github.io/components/dropdowns/
ドロップダウンで項目を選択しても、表示されない。
*******************Working solution*****************************
import React from "react";
import {ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle} from "reactstrap";
import superagent from "superagent";
class BootstrapSelect extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.changeValue = this.changeValue.bind(this);
this.state = {
actions: [],
dropDownValue: 'Select action',
dropdownOpen: false
};
}
toggle(event) {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
changeValue(e) {
this.setState({dropDownValue: e.currentTarget.textContent});
let id = e.currentTarget.getAttribute("id");
console.log(id);
}
componentDidMount() {
superagent
.get('/getActions')
.type('application/json; charset=utf-8')
.end(function (err, res) {
console.log(res.body);
this.setState({actions: res.body});
}.bind(this));
}
render() {
return (
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret>
{this.state.dropDownValue}
</DropdownToggle>
<DropdownMenu>
{this.state.actions.map(e => {
return <DropdownItem id={e.id} key={e.id} onClick={this.changeValue}>{e.name}</DropdownItem>
})}
</DropdownMenu>
</ButtonDropdown>
);
}
}
export default BootstrapSelect;
解決方法は?
DropDownItem(divの中)にonclickを追加し、状態を変更します。あなたのクリックイベントから"dropDownValue"を設定します。 dropDownToggleで、state.dropDownValueを取得します。
このようなものです。
changeValue(e) {
this.setState({dropDownValue: e.currentTarget.textContent})
}
<DropdownToggle caret>
{this.state.dropDownValue}
</DropdownToggle>
<DropdownItem>
<div onClick={this.changeValue}>Another Action</div>
</DropdownItem>
もちろん、これを動作させるためには、initして関数をバインドすることを忘れないでください。
関連
-
[解決済み] Apolloクライアントでログアウトした後、ストアをリセットする
-
[解決済み] error 'document' is not defined : eslint / React
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] formcontrollabel - material-ui | Reactのデフォルトのtypography classを変更するには?
-
[解決済み] react nativeで関数だらけのヘルパーファイルを作成する方法は?
-
[解決済み] Reactのrender()にFont Awesomeのアイコンを入れる方法
-
[解決済み] Reactコンポーネントに条件付きで属性を追加するにはどうすればよいですか?
-
[解決済み] レンダリング後に入力フィールドにフォーカスを設定するには?
-
[解決済み] React JSX: selecting "selected" on selected <select> option
-
[解決済み】 {this.props.children} に props を渡すには?}
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Warning.Itが表示されるのはなぜですか?Functions are not valid as a React child?
-
[解決済み] Jestの `beforeEach` グローバルは何のためにあるのですか?
-
[解決済み] React.createElement: type is invalid -- expected a string.
-
[解決済み] error 'document' is not defined : eslint / React
-
[解決済み] jest: テストスイートの実行に失敗しました。予期しないトークンのインポート
-
[解決済み] TypeError: reactjs の未定義のプロパティ 'status' を読み取ることができません。
-
[解決済み] reactstrapのドロップダウンで選択されたアイテムを設定する方法は?
-
[解決済み] componentWillReceiveProps は名称が変更されました。
-
[解決済み] validateDOMNesting警告React
-
[解決済み] アクシオスは定義されていません