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だとどうやるのかわからずです・・・
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/03 05:37
2018/07/03 05:48
2018/07/03 06:00
2018/07/03 06:15
2018/07/03 06:18
2018/07/03 06:19