質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

3141閲覧

react refを全件取得

cheche0830

総合スコア187

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/07/03 03:53

編集2018/07/03 05:36

reactコンポーネント内で

click = (i) => { this.refs["btn"+i].style.display = "block"; } //中略 for (let i = 0; i < 5 i++) { <button onClick={ this.click.bind(this,i) } className={theme.list} ref={"btn"+i}>ボタン</button> }

のようにボタンを出力していたとして、
クリックしたもの以外は非表示にしたいとします。

上記の場合であれば、

click = (i) => { this.refs.btn0.style.display = "none"; this.refs.btn2.style.display = "none"; this.refs.btn3.style.display = "none"; this.refs.btn4.style.display = "none"; this.refs.btn5.style.display = "none"; this.refs["btn"+i].style.display = "block"; }

ダサいですが上記の感じでいけるとおもうのですが、
実際は、for (let i = 0; i < 5 i++) {の部分が
量が多かったり、点在していたり、途中がぬけていたりと、
単純なループだけでは難しいので、
dom内でref=btn*ではじまるものだけを配列化して
その配列をループにまわしたいのですがそんなことは可能でしょうか?

ref 一括
ref 取得 全部
などで検索したのですがめぼしいものが見つからず・・・

ご教授お願いいたします。

//条件追加

すいません、上記の条件であれば実現できたのですが、
点在していたり・・・という点で下記の場合がございます。

//1 for (let i = 0; i < 5 i++) { <button onClick={ this.click.bind(this,i) } className={theme.list}>ボタン</button> } //2 for (let i = 0; i < 10 i++) { <button onClick={ this.click.bind(this,i) } className={theme.list2}>ボタン</button> } //3 for (let i = 0; i < 100 i++) { <button onClick={ this.click.bind(this,i) } className={theme.list3}>ボタン</button> } //4 <button onClick={ this.click.bind(this,i) } className={theme.list4}>ボタン</button>

例えば、buttonがいろんな箇所にいろいろ存在していて、
ただ、クリックしたもの意外はすべてnoneにするという排他関係にしたいのですが、reactでどうやっていいのかわからず、やむなくrefをつかってできないかと
jquery的な考えでやってしまっていました・・・
jqueryであれば、

$("button).click(function() { $("button").hide(); $(this).show(); });

これだけですんでしまうのであれなんですが、
reactだとどうやるのかわからずです・・・

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

排他制御を実現するのに ref を使わないでください。

Don’t Overuse Refs - React

https://codepen.io/og24715/pen/QxoxLq?editors=0010

js

1class App extends React.Component { 2 state = { 3 selectedButtonId: null, 4 }; 5 6 _handleClick = e => { 7 const { id } = e.target; 8 this.setState({ 9 selectedButtonId: id, 10 }); 11 }; 12 13 render() { 14 return ( 15 <div> 16 {[1, 2, 3 , 4, 5].map(v => ( 17 <button 18 id={`button-${v}`} 19 key={`button-${v}`} 20 disabled={`button-${v}` !== this.state.selectedButtonId && this.state.selectedButtonId} 21 onClick={this._handleClick} 22 > 23 button{v} 24 </button> 25 ))} 26 </div> 27 ); 28 } 29}; 30

投稿2018/07/03 04:31

編集2018/07/03 04:35
og24715

総合スコア832

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cheche0830

2018/07/03 05:37

ありがとうございます!やむなく使用してしまいました・・・追記いたします!
og24715

2018/07/03 05:48

追記見ました。点在していようが関係ありませんね。どのボタンをクリックしたかを state で持っていて、それぞれのボタンが自分がクリックされたか判定して非表示(回答では disabled)にするロジックは同じなので
cheche0830

2018/07/03 06:00

その場合、buttonを生成するforが100箇所あった場合100回同じことを書かなければいけないということでしょうか?できれば$("button").hide()的なdom全部をさらって処理してくれる方法があればと思ったのですがないんですかね・・・
og24715

2018/07/03 06:15

100個の button 要素に同じスタイルを適用するときにどうしますか?同じクラス名を付与しますよね?それと同じことですよ。同じ事を書きたくないのであればコンポーネント化して再利用すればよいのでは。
cheche0830

2018/07/03 06:18

あ、その手がありました。外部コンポーネント化してみます!
guest

0

~~```JavaScript
click = (i) => {
for (var a in this.refs) {
if (/^btn[0-9]+$/.test(a)) {
this.refs[a].style.display = (a === 'btn' + i)? 'block': 'none';
}
}
}

こんな感じでどうでしょう。~~ refsの使い方について誤った情報でしたので、全文削除させていただきます。

投稿2018/07/03 04:16

編集2018/07/04 02:36
tkanda

総合スコア2425

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cheche0830

2018/07/03 04:24

ありがとうございました!試してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問