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

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

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

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

onclick

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

JavaScript

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

Q&A

解決済

1回答

4722閲覧

React + TypeScript | OnClickで指定タグのclass追加・削除 & checkboxの判定

kerry

総合スコア2

Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

onclick

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

JavaScript

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

0グッド

0クリップ

投稿2020/07/12 14:54

やりたい事

下記のように、jsxを使った場合の、OnClickで指定タグのclass追加・削除はできますが、
React + TypeScriptを使ってコンポーネントを作成する場合でも、同じように実装を行いたいのですが、いまいち分からず困っています。

Faq.js

jsx

1import React from "react"; 2 3class Faq extends React.Component { 4 5 constructor(props) { 6 super(props); 7 this.state = { 8 open: false, 9 }; 10 } 11 12 toggle = () => { 13 this.setState({ open: !this.state.open }); 14 }; 15 16 render() { 17 return ( 18 <div className="faq__container"> 19 <button onClick={this.toggle}>表示・非表示ボタン</button> 20 <div className={this.state.open ? "open" : "hide"}> 21 内容 22 </div> 23 </div> 24 ); 25 } 26} 27 28export default FAQ;

FAQ.tsx

tsx

1import React, { ReactNode } from 'react'; 2 3import s from './Faq.scss'; 4 5interface FaqProps { 6 onClick: ; 7 children: ReactNode; 8 open: ; 9} 10 11export const Faq = ({ onClick, open,children }: FaqProps) => { 12 return ( 13 <div className={s.faq__container}> 14 <button onClick={onClick}>{question}</button> 15 <div className={s(open ? 'open' : 'hide')}> 16 {children} 17 </div> 18 </div> 19 ); 20 }; 21

本当は、inputのcheckbox(checked)を使って、scssでスタイリングするのが楽な方法かと思いますが、
Reactでの、checkboxの記述の仕方が理解できていない為、断念しました。

一方的な質問になってしまい、恐縮ですが、助言の程よろしくお願いいたします。
もし可能であれば、checkbox(checked)の記述の仕方もご教授できれば、幸いです。

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

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

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

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

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

hoshi-takanori

2020/07/13 03:46

JS か TS かは、型情報があるかないかの違いだけなので、TS でもクラスを使って書けますよ。 関数コンポーネントにする場合は、Hooks (useState) を使うと良いでしょう。
kerry

2020/07/13 06:42

ありがとうございます! なるほど、やってみます!
guest

回答1

0

自己解決

下記のようにして、無事解決しました。
hoshi-takanoriさん、ありがとうございました!

tsc

1import React, { useState, ReactNode } from 'react'; 2 3import s from './FaqButton.scss'; 4 5interface FaqButtonProps { 6 question: string; 7 children: ReactNode; 8} 9 10export const FaqButton = ({ question, children }: FaqButtonProps) => { 11 12 const [open, setContentState] = useState(false); 13 14 return ( 15 <div className={s.faq__container}> 16 <button onClick={() => setContentState(!open)} className={s.faq__question}> 17 {question} 18 </button> 19 <div className={s.faq__answer}> 20 <div className={s(open ? 'open' : 'hide')}> 21 {children} 22 </div> 23 </div> 24 </div> 25 ); 26 }; 27

投稿2020/07/13 08:10

kerry

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問