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

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

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

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

R

R言語は、「S言語」をオープンソースとして実装なおした、統計解析向けのプログラミング言語です。 計算がとても速くグラフィックも充実しているため、数値計算に向いています。 文法的には、統計解析部分はS言語を参考にしており、データ処理部分はSchemeの影響を受けています。 世界中の専門家が開発に関わり、日々新しい手法やアルゴリズムが追加されています。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

React.js

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

Q&A

解決済

2回答

2405閲覧

ReactでonClickを使た時にイベントが発火しない

barchi118

総合スコア4

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

R

R言語は、「S言語」をオープンソースとして実装なおした、統計解析向けのプログラミング言語です。 計算がとても速くグラフィックも充実しているため、数値計算に向いています。 文法的には、統計解析部分はS言語を参考にしており、データ処理部分はSchemeの影響を受けています。 世界中の専門家が開発に関わり、日々新しい手法やアルゴリズムが追加されています。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

React.js

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

0グッド

0クリップ

投稿2019/11/07 09:46

編集2019/11/07 11:21

Reactでモダールの閉じるボタンを作る。

Reactでモーダルを作っていて、モーダルの閉じるボタンを作っているときに、エラーはでないのですがonClickのあるクラスを押したときにモーダルを閉じるイベントが発生しません。
実現したいことは、閉じるボタンを押したときにモーダルが閉じるようにしたいです。
よろしくお願いいたします。

動作環境
使っているエディター VScode
OS          Windows10
npm ver 6.9.0
node ver v10.16.3

発生している問題・エラーメッセージ

エラーメッセージは特にでないですが、onClickのクラスを押してもイベントが発生しないです。

該当のソースコード

React.js

1class Modal extends React.Component { 2 constructor(props) { 3 super(props); 4 this.state={isModalOpen:false}; 5 } 6 7 handleClickLesson(){ 8 this.setState({isModalOpen:true}); 9 } 10 11 handleClickClose(){ 12 this.setState({isModalOpen: false}); 13 } 14 15 test() { 16 console.log('aaa'); 17 } 18 19 render(){ 20 let modal 21 22 if(this.state.isModalOpen){ 23 modal=( 24 <div> 25 <nav className="navmenu" id='navmenu-1' > 26 <ul> 27 <li><a href="">Top</a></li> 28 <li><a href="about.html">About</a></li> 29 <li><a href="thoughts.html">Thoughts</a></li> 30 <li><a href="works.html">Works</a></li> 31 <li><a href="https://taroken.org/contact/">Contact</a></li> 32 </ul> 33 <button onClick={()=>{this.handleClickClose()}}> 34 とじる 35 </button> 36 </nav> 37 </div> 38 ) 39 } 40 41 return( 42 <div> 43 {modal} 44 <button onClick={()=>{this.handleClickLesson()}}> 45 開く 46 </button> 47 <span>test</span> 48 <span>test</span> 49 <span>test</span> 50 </div> 51 52 ); 53 } 54}

試したこと

modal-close-btnクラスのonClick={()=>{this.handleClickClose()}をonClick={()=>{this.test()}にしてイベントが発火するか試し、コンソールにaaaが表示されました。

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

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

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

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

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

guest

回答2

0

解決時のコード

React.js

1class Modal extends React.Component { 2 constructor(props) { 3 super(props); 4 this.state={isModalOpen:false}; 5 } 6 7 handleClickLesson(){ 8 this.setState({isModalOpen:true}); 9 } 10 11 handleClickClose(){ 12 this.setState({isModalOpen: false}); 13 } 14 15 test() { 16 console.log('aaa'); 17 } 18 render(){ 19 let modal; 20 21 if(this.state.isModalOpen){ 22 modal=( 23 <div> 24 <nav className="navmenu" id='navmenu-1' > 25 <ul> 26 <li><a href="">Top</a></li> 27 <li><a href="about.html">About</a></li> 28 <li><a href="thoughts.html">Thoughts</a></li> 29 <li><a href="works.html">Works</a></li> 30 <li><a href="https://taroken.org/contact/">Contact</a></li> 31 </ul> 32 <button onClick={()=>{this.handleClickClose()}}> 33 とじる 34 </button> 35 </nav> 36 </div> 37 ) 38 } 39 40 return( 41 <div> 42 {modal} 43 <button onClick={()=>{this.handleClickLesson()}}> 44 開く 45 </button> 46 <span>test</span> 47 <span>test</span> 48 <span>test</span> 49 </div> 50 51 ); 52 } 53}

投稿2019/11/07 11:31

barchi118

総合スコア4

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

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

0

自己解決

let modalの ; が抜けていたので
let modal; と書き直したところ正常に動作しました。

投稿2019/11/07 11:27

barchi118

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問